v2.7.1

This reverts commit 4de2177cc7.

.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'standard/no-callback-literal': 0
   }
 }

.github/ISSUE_TEMPLATE/bug.md

@@ -1,7 +1,7 @@
 ---
-name: 报告Bug(请先查看常见问题及搜索issue列表中有无你要提的问题)
+name: 报告Bug(请先查看常见问题及搜索已关闭issue列表中有无你要提的问题)
 about: 创建报告以帮助我们改进
-title: '（未回答的问题请删除）'
+title: '（未回答的问题请删除，减少多余信息干扰）'
 labels: bug
 assignees: ''
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zy",
-  "version": "2.6.9",
+  "version": "2.7.1-HappyNewYear",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -17,56 +17,54 @@
   },
   "main": "background.js",
   "dependencies": {
-    "axios": "^0.21.0",
-    "cheerio": "^1.0.0-rc.3",
-    "core-js": "^3.8.0",
-    "cors": "^2.8.5",
+    "axios": "^0.21.1",
+    "cheerio": "^1.0.0-rc.5",
+    "core-js": "^3.8.1",
     "dexie": "^3.0.3",
     "electron-localshortcut": "^3.2.1",
     "electron-proxy-agent": "^1.2.0",
     "electron-updater": "^4.3.5",
     "element-ui": "^2.14.1",
-    "express": "^4.17.1",
-    "fast-xml-parser": "^3.17.4",
+    "fast-xml-parser": "^3.17.5",
     "html2canvas": "^1.0.0-rc.7",
-    "iptv-playlist-parser": "^0.5.0",
+    "iptv-playlist-parser": "^0.5.1",
     "m3u": "0.0.2",
     "m3u8-parser": "^4.5.0",
     "memcached": "^2.2.2",
     "modern-normalize": "^1.0.0",
     "mousetrap": "^1.6.5",
-    "pinyin-match": "^1.1.1",
+    "pinyin-match": "^1.1.7",
     "qrcode.vue": "^1.7.0",
     "randomstring": "^1.1.5",
     "session": "^0.1.0",
     "sortablejs": "^1.12.0",
     "v-fit-columns": "^0.2.0",
     "vue": "^2.6.12",
-    "vue-clickaway": "^2.2.2",
     "vue-infinite-loading": "^2.4.5",
     "vue-waterfall-plugin": "^1.1.0",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.6.0",
-    "xgplayer": "^2.13.2",
-    "xgplayer-hls.js": "^2.2.5"
+    "xgplayer": "^2.16.0",
+    "xgplayer-flv.js": "^2.1.2",
+    "xgplayer-hls.js": "^2.3.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.9",
     "@vue/cli-plugin-eslint": "~4.5.9",
     "@vue/cli-plugin-vuex": "~4.5.9",
     "@vue/cli-service": "~4.5.9",
-    "@vue/eslint-config-standard": "^5.1.2",
+    "@vue/eslint-config-standard": "^6.0.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-component": "^1.1.1",
-    "electron": "^11.0.3",
+    "electron": "^11.1.1",
     "electron-devtools-installer": "^3.1.1",
-    "eslint": "^7.14.0",
+    "eslint": "^7.16.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.1.0",
-    "eslint-plugin-vue": "^7.1.0",
-    "sass": "^1.29.0",
+    "eslint-plugin-vue": "^7.3.0",
+    "sass": "^1.30.0",
     "sass-loader": "^10.1.0",
     "vue-cli-plugin-electron-builder": "2.0.0-rc.5",
     "vue-template-compiler": "^2.6.12"

public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="referrer" content="same-origin"/>
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title> 
   </head>

src/assets/scss/style.scss

@@ -178,6 +178,10 @@
       .el-select-dropdown__item.selected.hover{ //是上游的bug吗？临时性修补
         background-color: transparent;
       }
+      
+      .el-select-dropdown__wrap{
+        max-height: 574px
+      }
     }
     > span{
       .el-input-number{

src/assets/scss/theme/dark.scss

@@ -131,6 +131,12 @@
                 border-color: var(--d-c-8);
               }
             }
+            .selected {
+              background-color: var(--d-c-5);
+              &:hover{
+                background-color: var(--d-c-5);
+              }
+            }
           }
         }
       }
@@ -139,6 +145,12 @@
   .play{
     background-color: var(--d-bgc-1);
     box-shadow: var(--d-bsc);
+    .el-switch__label {
+      color: var(--d-fc-2)
+    }
+    .el-switch__label.is-active {
+      color: #409EFF
+    }
     .el-input{
       input{
         background-color: var(--d-bgc-1);
@@ -319,6 +331,19 @@
   // Page of list using table and picture
   .listpage{
     color: var(--d-fc-2);
+    .listpage-header-divider{
+      background-color: var(--d-bgc-1);
+      .el-divider__text {
+        background-color: var(--d-bgc-2);
+      }
+      .el-button{
+        background-color: var(--d-bgc-2);
+        color: var(--d-fc-2);
+        &:hover{
+          color: var(--d-fc-3)
+        }
+      }
+    }
     .listpage-header, .toolbar{
       border-bottom-color: var(--d-c-3);
       .btn{
@@ -326,6 +351,12 @@
           color: var(--d-fc-3)
         }
       }
+      .el-switch__label {
+        color: var(--d-fc-2)
+      }
+      .el-switch__label.is-active {
+        color: #409EFF
+      }
       .el-button{
         background-color: var(--d-bgc-2);
         color: var(--d-fc-2);

src/assets/scss/theme/green.scss

@@ -131,6 +131,12 @@
                 border-color: var(--g-c-8);
               }
             }
+            .selected {
+              background-color: var(--g-c-5);
+              &:hover{
+                background-color: var(--g-c-5);
+              }
+            }
           }
         }
       }
@@ -319,6 +325,19 @@
   // Page of list using table and picture
   .listpage{
     color: var(--g-fc-2);
+    .listpage-header-divider{
+      background-color: var(--g-bgc-1);
+      .el-divider__text {
+        background-color: var(--g-bgc-2);
+      }
+      .el-button{
+        background-color: var(--g-bgc-2);
+        color: var(--g-fc-2);
+        &:hover{
+          color: var(--g-fc-3)
+        }
+      }
+    }
     .listpage-header, .toolbar{
       border-bottom-color: var(--g-c-3);
       .btn{

src/assets/scss/theme/light.scss

@@ -131,6 +131,12 @@
                 border-color: var(--l-c-8);
               }
             }
+            .selected {
+              background-color: var(--l-c-5);
+              &:hover{
+                background-color: var(--l-c-5);
+              }
+            }
           }
         }
       }
@@ -319,6 +325,19 @@
   // Page of list using table and picture
   .listpage{
     color: var(--l-fc-2);
+    .listpage-header-divider{
+      background-color: var(--l-bgc-1);
+      .el-divider__text {
+        background-color: var(--l-bgc-2);
+      }
+      .el-button{
+        background-color: var(--l-bgc-2);
+        color: var(--l-fc-2);
+        &:hover{
+          color: var(--l-fc-3)
+        }
+      }
+    }
     .listpage-header, .toolbar{
       border-bottom-color: var(--l-c-3);
       .btn{

src/assets/scss/theme/pink.scss

@@ -131,6 +131,12 @@
                 border-color: var(--p-c-8);
               }
             }
+            .selected {
+              background-color: var(--p-c-5);
+              &:hover{
+                background-color: var(--p-c-5);
+              }
+            }
           }
         }
       }
@@ -319,6 +325,19 @@
   // Page of list using table and picture
   .listpage{
     color: var(--p-fc-2);
+    .listpage-header-divider{
+      background-color: var(--p-bgc-1);
+      .el-divider__text {
+        background-color: var(--p-bgc-2);
+      }
+      .el-button{
+        background-color: var(--p-bgc-2);
+        color: var(--p-fc-2);
+        &:hover{
+          color: var(--p-fc-3)
+        }
+      }
+    }
     .listpage-header, .toolbar{
       border-bottom-color: var(--p-c-3);
       .btn{

src/background.js

@@ -1,14 +1,14 @@
 'use strict'
 
-import './lib/site/server'
 import { app, protocol, BrowserWindow, globalShortcut } from 'electron'
 import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
 import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
 import { initUpdater } from './lib/update/update'
 const isDevelopment = process.env.NODE_ENV !== 'production'
+// const log = require('electron-log') // 用于调试主程序
 
 app.commandLine.appendSwitch('disable-features', 'OutOfBlinkCors') // 允许跨域
-// app.commandLine.appendSwitch('--ignore-certificate-errors', 'true') // 忽略证书相关错误
+app.commandLine.appendSwitch('--ignore-certificate-errors', 'true') // 忽略证书相关错误
 
 let win
 
@@ -23,7 +23,8 @@ function createWindow () {
     webPreferences: {
       webSecurity: false,
       enableRemoteModule: true,
-      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
+      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
+      allowRunningInsecureContent: false
     }
   })
 
@@ -35,6 +36,23 @@ function createWindow () {
     win.loadURL('app://./index.html')
   }
 
+  // 修改request headers
+  // Sec-Fetch下禁止修改，浏览器自动加上请求头 https://www.cnblogs.com/fulu/p/13879080.html 暂时先用index.html的meta referer policy替代
+  const filter = {
+      urls: ['http://*/*', 'http://*/*']
+  }
+  win.webContents.session.webRequest.onBeforeSendHeaders(filter, (details, callback) => {
+    const url = new URL(details.url)
+    details.requestHeaders.Origin = url.origin
+    if (!details.url.includes('//localhost') && details.requestHeaders.Referer && details.requestHeaders.Referer.includes('//localhost')) {
+      details.requestHeaders.Referer = url.origin
+    }
+    callback({
+      cancel: false,
+      requestHeaders: details.requestHeaders
+    })
+  })
+
   initUpdater(win)
 
   win.on('closed', () => {

src/components/Detail.vue

@@ -52,10 +52,16 @@
           </span>
         </div>
         <div
-          class="desc" v-show="info.des">{{info.des}}</div>
+          class="desc" v-show="info.des">{{info.des}}
+        </div>
+        <div class="m3u8" v-if="videoFullList.length > 1">
+          <div class="box">
+            <span v-bind:class="{ selected: i.flag === videoFlag }" v-for="(i, j) in videoFullList" :key="j" @click="updateVideoList(i)">{{i.flag}}</span>
+          </div>
+        </div>
         <div class="m3u8">
           <div class="box">
-            <span v-for="(i, j) in m3u8List" :key="j" @click="playEvent(j)">{{i | ftName}}</span>
+            <span v-for="(i, j) in videoList" :key="j" @click="playEvent(j)">{{i | ftName}}</span>
           </div>
         </div>
       </div>
@@ -76,7 +82,9 @@ export default {
   data () {
     return {
       loading: true,
-      m3u8List: [],
+      videoFlag: '',
+      videoList: [],
+      videoFullList: [],
       info: {},
       playOnline: false,
       selectedOnlineSite: '哔嘀',
@@ -121,26 +129,52 @@ export default {
       set (val) {
         this.SET_SHARE(val)
       }
+    },
+    DetailCache: {
+      get () {
+        return this.$store.getters.getDetailCache
+      },
+      set (val) {
+        this.SET_DetailCache(val)
+      }
     }
   },
   methods: {
-    ...mapMutations(['SET_VIEW', 'SET_VIDEO', 'SET_DETAIL', 'SET_SHARE']),
+    ...mapMutations(['SET_VIEW', 'SET_VIDEO', 'SET_DETAIL', 'SET_SHARE', 'SET_DetailCache']),
+    addClass (flag) {
+      if (flag === this.videoFlag) {
+        return 'selectedBox'
+      } else {
+        return 'box'
+      }
+    },
     close () {
       this.detail.show = false
     },
+    async updateVideoList (e) {
+      this.videoFlag = e.flag
+      this.videoList = e.list
+      const db = await history.find({ site: this.detail.key, ids: this.detail.info.id })
+      if (db) {
+        const doc = { ...db }
+        doc.videoFlag = e.flag
+        delete doc.id
+        history.update(db.id, doc)
+      }
+    },
     async playEvent (n) {
       if (!this.playOnline) {
         const db = await history.find({ site: this.detail.key, ids: this.detail.info.id })
         if (db) {
-          this.video = { key: db.site, info: { id: db.ids, name: db.name, index: n, site: this.detail.site } }
+          this.video = { key: db.site, info: { id: db.ids, name: db.name, index: n, site: this.detail.site, videoFlag: this.videoFlag } }
         } else {
-          this.video = { key: this.detail.key, info: { id: this.detail.info.id, name: this.detail.info.name, index: n, site: this.detail.site } }
+          this.video = { key: this.detail.key, info: { id: this.detail.info.id, name: this.detail.info.name, index: n, site: this.detail.site, videoFlag: this.videoFlag } }
         }
         this.video.detail = this.info
         this.view = 'Play'
         this.detail.show = false
       } else {
-        const db = await history.find({ site: this.detail.key, ids: this.detail.info.id })
+        const db = await history.find({ site: this.detail.key, ids: this.info.id })
         if (db) {
           db.index = n
           db.detail = this.info
@@ -211,63 +245,54 @@ export default {
       }
     },
     downloadEvent () {
-      const key = this.detail.key
-      const id = this.info.id
-      zy.download(key, id).then(res => {
-        if (res && res.m3u8List) {
-          const list = res.m3u8List.split('#')
-          let downloadUrl = ''
-          for (const i of list) {
-            const url = encodeURI(i.split('$')[1])
-            downloadUrl += (url + '\n')
-          }
-          clipboard.writeText(downloadUrl)
-          this.$message.success('『MP4』格式的链接已复制, 快去下载吧!')
-        } else {
-          zy.detail(key, id).then(res => {
-            const list = [...res.m3u8List]
-            let downloadUrl = ''
-            for (const i of list) {
-              const url = encodeURI(i.split('$')[1])
-              downloadUrl += (url + '\n')
-            }
-            clipboard.writeText(downloadUrl)
-            this.$message.success('『M3U8』格式的链接已复制, 快去下载吧!')
-          })
-        }
+      zy.download(this.detail.key, this.info.id, this.videoFlag).then(res => {
+        clipboard.writeText(res.downloadUrls)
+        this.$message.success(res.info)
+      }).catch((err) => {
+        this.$message.error(err.info)
       })
     },
     shareEvent () {
       this.share = {
         show: true,
         key: this.detail.key,
-        info: this.detail.info
+        info: this.info
       }
     },
     doubanLinkEvent () {
-      const name = this.detail.info.name.trim()
-      zy.doubanLink(name).then(link => {
+      const name = this.info.name.trim()
+      const year = this.info.year
+      zy.doubanLink(name, year).then(link => {
         const open = require('open')
         open(link)
       })
     },
-    getDoubanRate () {
-      const name = this.detail.info.name.trim()
-      zy.doubanRate(name).then(res => {
-        this.info.rate = res
-      })
+    async getDoubanRate () {
+      const name = this.info.name.trim()
+      const year = this.info.year
+      this.info.rate = await zy.doubanRate(name, year)
     },
-    getDetailInfo () {
+    async getDetailInfo () {
       const id = this.detail.info.ids || this.detail.info.id
-      zy.detail(this.detail.key, id).then(res => {
-        if (res) {
-          this.info = res
-          this.$set(this.info, 'rate', '')
-          this.m3u8List = res.m3u8List
-          this.getDoubanRate()
-          this.loading = false
+      const cacheKey = this.detail.key + '@' + id
+      const db = await history.find({ site: this.detail.key, ids: id })
+      if (db) this.videoFlag = db.videoFlag
+      if (!this.DetailCache[cacheKey]) {
+        this.DetailCache[cacheKey] = await zy.detail(this.detail.key, id)
+      }
+      const res = this.DetailCache[cacheKey]
+      if (res) {
+        this.info = res
+        this.$set(this.info, 'rate', this.DetailCache[cacheKey].rate || '')
+        this.videoFlag = this.videoFlag || res.fullList[0].flag
+        this.videoList = res.fullList[0].list
+        this.videoFullList = res.fullList
+        this.loading = false
+        if (!this.info.rate) {
+          await this.getDoubanRate()
+          this.DetailCache[cacheKey].rate = this.info.rate
         }
-      })
+      }
     }
   },
   created () {
@@ -389,6 +414,15 @@ export default {
           margin: 6px 10px 0px 0px;
           padding: 8px 22px;
         }
+        .selected {
+          display: inline-block;
+          font-size: 12px;
+          border: 1px solid;
+          border-radius: 2px;
+          cursor: pointer;
+          margin: 6px 10px 0px 0px;
+          padding: 8px 22px;
+        }
       }
     }
   }

src/components/EditSites.vue

@@ -4,16 +4,16 @@
           <el-switch v-model="enableBatchEdit" active-text="批处理分组">></el-switch>
           <el-checkbox v-model="setting.excludeR18Films" @change="excludeR18FilmsChangeEvent">屏蔽福利片</el-checkbox>
           <el-button @click="addSite" icon="el-icon-document-add">新增</el-button>
-          <el-button @click="exportSites" icon="el-icon-upload2" >导出</el-button>
-          <el-button @click="importSites" icon="el-icon-download">导入</el-button>
-          <el-button @click="checkAllSite" icon="el-icon-refresh" :loading="checkAllSitesLoading">检测{{ this.checkAllSitesLoading ? this.checkProgress + '/' + this.sites.length : '' }}</el-button>
+          <el-button @click="exportSites" icon="el-icon-upload2" title="导出全部，自动添加扩展名">导出</el-button>
+          <el-button @click="importSites" icon="el-icon-download" title="支持同时导入多个文件">导入</el-button>
+          <el-button @click="checkAllSite" icon="el-icon-refresh" :loading="checkAllSitesLoading" title="可在后台运行">检测{{ this.checkAllSitesLoading ? this.checkProgress + '/' + this.sites.length : '' }}</el-button>
           <el-button @click="resetSitesEvent" icon="el-icon-refresh-left">重置</el-button>
     </div>
     <div class="listpage-header" v-show="enableBatchEdit">
           <el-switch v-model="enableBatchEdit" active-text="批处理分组"></el-switch>
           <el-input placeholder="新组名" v-model="batchGroupName"></el-input>
           <el-switch v-model="batchIsActive" active-text="启用"></el-switch>
-          <el-button type="primary" icon="el-icon-edit" @click.stop="saveBatchEdit">保存</el-button>
+          <el-button type="primary" icon="el-icon-edit" @click.stop="saveBatchEdit" title="输入框组名为空时仅保存开关状态">保存分组与开关状态</el-button>
           <el-button @click="removeSelectedSites" icon="el-icon-delete-solid">删除</el-button>
     </div>
     <div class="listpage-body" id="sites-body">
@@ -94,6 +94,9 @@
           <el-form-item label="下载接口" prop='download'>
             <el-input v-model="siteInfo.download" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="请输入Download接口地址，可以空着"/>
           </el-form-item>
+          <el-form-item label="解析接口" prop='jiexiUrl'>
+            <el-input v-model="siteInfo.jiexiUrl" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="请输入解析接口地址，可以空着"/>
+          </el-form-item>
           <el-form-item label="分组" prop='group'>
             <el-select v-model="siteInfo.group" allow-create filterable default-first-option placeholder="请输入分组">
               <el-option v-for="item in siteGroup" :key="item" :label="item" :value="item"></el-option>
@@ -133,6 +136,7 @@ export default {
         name: '',
         api: '',
         download: '',
+        jiexiUrl: '',
         group: '',
         isActive: true
       },
@@ -186,6 +190,17 @@ export default {
         this.$message.info('正在检测, 请勿操作.')
         this.enableBatchEdit = false
       }
+      if (this.enableBatchEdit) {
+        if (this.setting.shiftTooltipLimitTimes === undefined) this.setting.shiftTooltipLimitTimes = 5
+        if (this.setting.shiftTooltipLimitTimes) {
+          this.$message.info('多选时支持shift快捷键')
+          this.setting.shiftTooltipLimitTimes--
+          setting.find().then(res => {
+            res.shiftTooltipLimitTimes = this.setting.shiftTooltipLimitTimes
+            setting.update(res)
+          })
+        }
+      }
     }
   },
   methods: {
@@ -260,6 +275,7 @@ export default {
         name: '',
         api: '',
         download: '',
+        jiexiUrl: '',
         group: '',
         isActive: true
       }
@@ -318,6 +334,7 @@ export default {
         name: this.siteInfo.name,
         api: this.siteInfo.api,
         download: this.siteInfo.download,
+        jiexiUrl: this.siteInfo.jiexiUrl,
         group: this.siteInfo.group,
         isActive: this.siteInfo.isActive
       }
@@ -328,6 +345,7 @@ export default {
           name: '',
           api: '',
           download: '',
+          jiexiUrl: '',
           group: ''
         }
         this.dialogType === 'edit' ? this.$message.success('修改成功！') : this.$message.success('新增源成功！')
@@ -342,13 +360,12 @@ export default {
       const str = JSON.stringify(arr, null, 2)
       const options = {
         filters: [
-          { name: 'JSON file', extensions: ['json'] },
-          { name: 'Normal text file', extensions: ['txt'] },
-          { name: 'All types', extensions: ['*'] }
+          { name: 'JSON file', extensions: ['json'] }
         ]
       }
       remote.dialog.showSaveDialog(options).then(result => {
         if (!result.canceled) {
+          if (!result.filePath.endsWith('.json')) result.filePath += '.json'
           fs.writeFileSync(result.filePath, str)
           this.$message.success('已保存成功')
         }
@@ -363,9 +380,7 @@ export default {
       }
       const options = {
         filters: [
-          { name: 'JSON file', extensions: ['json'] },
-          { name: 'Normal text file', extensions: ['txt'] },
-          { name: 'All types', extensions: ['*'] }
+          { name: 'JSON file', extensions: ['json'] }
         ],
         properties: ['openFile', 'multiSelections']
       }
@@ -462,6 +477,7 @@ export default {
       })
     },
     async checkAllSite () {
+      if (this.checkAllSitesLoading) return
       this.checkAllSitesLoading = true
       this.stopFlag = false
       this.checkProgress = 0
@@ -471,6 +487,7 @@ export default {
       await Promise.all(other.map(site => this.checkSingleSite(site))).then(res => {
         this.checkAllSitesLoading = false
         this.getSites()
+        if (!this.stopFlag) this.$message.success('视频点播源站批量检测已完成！')
       })
     },
     async checkSingleSite (row) {

src/components/Film.vue

@@ -9,10 +9,7 @@
           :value="item.name">
         </el-option>
       </el-select>
-      <el-switch v-model="searchViewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="table" @change="updateSearchViewMode"
-                 v-if="show.find">
-      </el-switch>
-      <el-select v-model="selectedClassName" size="small" placeholder="类型" :popper-append-to-body="false" popper-class="popper" @change="classClick" v-show="show.class">
+      <el-select v-model="selectedClassName" size="small" placeholder="类型" :popper-append-to-body="false" popper-class="popper" @change="classClick" v-if="classList && classList.length" v-show="!showFind">
         <el-option
           v-for="item in classList"
           :key="item.tid"
@@ -20,6 +17,14 @@
           :value="item.name">
         </el-option>
       </el-select>
+      <el-select v-model="selectedSearchClassNames" size="small" multiple placeholder="类型" :popper-append-to-body="false" popper-class="popper" v-if="searchClassList && searchClassList.length" v-show="showFind && showToolbar" @remove-tag="refreshFilteredList" @change="refreshFilteredList">
+        <el-option
+          v-for="(item, index) in searchClassList"
+          :key='index'
+          :label="item"
+          :value="item">
+        </el-option>
+      </el-select>
       <el-autocomplete
         clearable
         size="small"
@@ -45,11 +50,12 @@
           </el-option>
         </el-select>
         <!--方便触屏-->
-        <el-button icon="el-icon-search" @click.stop="searchEvent" slot="append" />
+        <el-button icon="el-icon-search" @click.stop="searchEvent" slot="append" v-if="!searchRunning"/>
+        <el-button icon="el-icon-loading" @click.stop="stopSearchEvent" slot="append" v-if="searchRunning" title='点击可停止搜索'/>
       </el-autocomplete>
     </div>
-    <div class="toolbar" v-if="!show.find && showToolbar">
-      <el-select v-model="selectedAreas" size="small" multiple collapse-tags placeholder="地区" popper-class="popper" :popper-append-to-body="false" @remove-tag="refreshFilteredList" @visible-change="refreshFilteredList($event)">
+    <div class="toolbar" v-show="showToolbar">
+      <el-select v-model="selectedAreas" size="small" multiple placeholder="地区" popper-class="popper" :popper-append-to-body="false" @remove-tag="refreshFilteredList" @change="refreshFilteredList">
         <el-option
           v-for="item in areas"
           :key="item"
@@ -72,11 +78,13 @@
        <el-input-number size="small" v-model="selectedYears.end" :min=0 :max="new Date().getFullYear()" controls-position="right" step-strictly @change="refreshFilteredList"></el-input-number>
        </span>
     </div>
-    <el-divider content-position="center" v-if="!show.find">
-      <el-button type="text" size="mini" @click='() => { showToolbar = !showToolbar; if (!showToolbar) this.refreshFilteredList() }'>{{ showToolbar ? '隐藏工具栏' : '显示工具栏' }}</el-button>
+    <el-divider class="listpage-header-divider" content-position="right">
+      <el-button type="text" size="mini" @click="toggleViewMode">视图切换</el-button>
+      <el-button type="text" size="mini" @click='() => { showToolbar = !showToolbar; if (!showToolbar) this.refreshFilteredList() }' title="收起工具栏会重置筛选排序">{{ showToolbar ? '隐藏工具栏' : '显示工具栏' }}</el-button>
+      <el-button type="text" size="mini" @click="backTop">回到顶部</el-button>
     </el-divider>
     <div class="listpage-body" id="film-body" infinite-wrapper>
-      <div class="show-picture" v-if="setting.view === 'picture' && !show.find">
+      <div class="show-picture" v-if="setting.view === 'picture' && !showFind">
           <Waterfall ref="filmWaterfall" :list="filteredList" :gutter="20" :width="240"
           :breakpoints="{
             1200: { //当屏幕宽度小于等于1200
@@ -115,10 +123,11 @@
           </Waterfall>
           <infinite-loading force-use-infinite-wrapper :identifier="infiniteId" @infinite="infiniteHandler"></infinite-loading>
       </div>
-      <div class="show-table" v-if="setting.view === 'table' && !show.find">
+      <div class="show-table" v-if="setting.view === 'table' && !showFind">
         <el-table
           size="mini"
           :data="filteredList"
+          ref="filmTable"
           height="100%"
           :empty-text="statusText"
           @row-click="(row) => detailEvent(site, row)"
@@ -127,7 +136,7 @@
             prop="name"
             label="片名">
           </el-table-column>
-          <el-table-column
+          <el-table-column v-if="type.name === '最新'"
             prop="type"
             label="类型"
             width="100">
@@ -148,16 +157,16 @@
             label="语言"
             width="100">
           </el-table-column>
-          <el-table-column
-            prop="note"
-            label="备注"
-            width="120">
-          </el-table-column>
-          <el-table-column
+          <el-table-column v-if="showTableLastColumn"
             prop="last"
             label="最近更新"
             :formatter="dateFormat"
-            align="left">
+            align="left"
+            width="120">
+          </el-table-column>
+          <el-table-column
+            prop="note"
+            label="备注">
           </el-table-column>
           <el-table-column
             label="操作"
@@ -180,10 +189,10 @@
           </infinite-loading>
         </el-table>
       </div>
-      <div class="show-table" v-if="searchViewMode=== 'table' && show.find">
+      <div class="show-table" v-if="setting.searchViewMode === 'table' && showFind">
         <el-table size="mini"
           ref="searchResultTable"
-          :data="searchContents.filter(res => !setting.excludeR18Films || (res.type !== undefined && !containsR18Keywords(res.type)))"
+          :data="filteredSearchContents"
           height="100%"
           :empty-text="statusText"
           @filter-change="filterChange"
@@ -209,36 +218,38 @@
           </el-table-column>
           <el-table-column
             prop="type"
-            :filters="getFilters('type')"
-            :filter-method="(value, row, column) => { this.currentColumn = column; return value === row.type }"
             label="类型"
-            width="90">
+            width="100">
           </el-table-column>
           <el-table-column
               sortable
               prop="year"
               label="上映"
-              width="90">
+              width="100">
           </el-table-column>
           <el-table-column
             prop="area"
-            :filters="getFilters('area')"
-            :filter-method="(value, row, column) => { this.currentColumn = column; return value === row.area }"
             label="地区"
-            width="90">
+            width="100">
           </el-table-column>
           <el-table-column
             :filters="getFilters('lang')"
             :filter-method="(value, row, column) => { this.currentColumn = column; return value === row.lang }"
             prop="lang"
             label="语言"
-            width="70">
+            width="100">
+          </el-table-column>
+          <el-table-column v-if="showTableLastColumn"
+            prop="last"
+            label="最近更新"
+            :formatter="dateFormat"
+            align="left"
+            width="120">
           </el-table-column>
           <el-table-column
             sortable
             prop="note"
-            label="备注"
-            width="120">
+            label="备注">
           </el-table-column>
           <el-table-column
             label="操作"
@@ -254,8 +265,8 @@
           </el-table-column>
         </el-table>
       </div>
-      <div class="show-picture" v-if="searchViewMode === 'picture' && show.find">
-          <Waterfall ref="filmSearchWaterfall" :list="searchContents.filter(res => !setting.excludeR18Films || (res.type !== undefined && !containsR18Keywords(res.type)))" :gutter="20" :width="240"
+      <div class="show-picture" v-if="setting.searchViewMode === 'picture' && showFind">
+          <Waterfall ref="filmSearchWaterfall" :list="filteredSearchContents" :gutter="20" :width="240"
           :breakpoints="{
             1200: { //当屏幕宽度小于等于1200
               rowPerView: 4,
@@ -310,19 +321,18 @@ export default {
   name: 'film',
   data () {
     return {
-      show: {
-        body: false,
-        site: false,
-        class: false,
-        classList: false,
-        find: false
-      },
+      showFind: false,
+      showToolbar: false,
+      showTableLastColumn: false,
       sites: [],
       site: {},
       classList: [],
+      searchClassList: [],
       type: {},
       selectedSiteName: '',
       selectedClassName: '',
+      selectedSearchClassNames: [],
+      totalpagecount: 0,
       pagecount: 0,
       recordcount: 0,
       list: [],
@@ -332,19 +342,21 @@ export default {
       searchList: [],
       searchTxt: '',
       searchContents: [],
+      filteredSearchContents: [],
       currentColumn: '',
       searchGroup: '',
       searchGroups: [],
       // 福利片关键词
       r18KeyWords: ['伦理', '论理', '倫理', '福利', '激情', '理论', '写真', '情色', '美女', '街拍', '赤足', '性感', '里番'],
-      searchViewMode: 'picture',
       filteredList: [],
       areas: [],
       selectedAreas: [],
       sortKeyword: '',
       sortKeywords: ['按片名', '按上映年份', '按更新时间'],
       selectedYears: { start: 0, end: new Date().getFullYear() },
-      showToolbar: false
+      searchRunning: false,
+      siteSearchCount: 0,
+      infiniteHandlerCount: 0
     }
   },
   components: {
@@ -392,8 +404,21 @@ export default {
         this.SET_SETTING(val)
       }
     },
+    DetailCache: {
+      get () {
+        return this.$store.getters.getDetailCache
+      },
+      set (val) {
+        this.SET_DetailCache(val)
+      }
+    },
     filterSettings () {
       return this.$store.getters.getSetting.excludeR18Films // 需要监听的数据
+    },
+    searchSites () {
+      if (this.searchGroup === '站内') return [this.site]
+      if (this.searchGroup === '全站') return this.sites
+      return this.sites.filter(site => site.group === this.searchGroup)
     }
   },
   filters: {
@@ -404,7 +429,11 @@ export default {
   },
   watch: {
     view () {
-      this.changeView()
+      if (this.view === 'Film') {
+        this.getAllSites()
+        if (this.$refs.filmWaterfall) this.$refs.filmWaterfall.resize() // 瀑布插件resize和refresh功能相同，只是延时不同
+        if (this.$refs.filmSearchWaterfall) this.$refs.filmSearchWaterfall.resize()
+      }
     },
     searchTxt () {
       if (this.searchTxt === '清除历史记录...') {
@@ -422,22 +451,57 @@ export default {
         this.refreshFilteredList()
       },
       deep: true
+    },
+    siteSearchCount () {
+      if (this.siteSearchCount === this.searchSites.length) this.searchRunning = false
+    },
+    searchContents: {
+      handler (list) {
+        this.areas = [...new Set(list.map(ele => ele.area))].filter(x => x)
+        this.searchClassList = [...new Set(list.map(ele => ele.type))].filter(x => x)
+        this.refreshFilteredList()
+      },
+      deep: true
+    },
+    selectedAreas: {
+      handler () {
+        this.infiniteHandlerCount = 0
+      },
+      deep: true
+    },
+    selectedYears: {
+      handler () {
+        this.infiniteHandlerCount = 0
+      },
+      deep: true
     }
   },
   methods: {
-    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE', 'SET_SETTING']),
-    refreshFilteredList (popperVisible) {
-      if (popperVisible === true) return
+    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE', 'SET_SETTING', 'SET_DetailCache']),
+    backTop () {
+      const viewMode = this.showFind ? this.setting.searchViewMode : this.setting.view
+      if (viewMode === 'picture') {
+        document.getElementById('film-body').scrollTop = 0
+      } else {
+        const table = this.showFind ? this.$refs.searchResultTable : this.$refs.filmTable
+        table.bodyWrapper.scrollTop = 0
+      }
+    },
+    refreshFilteredList () {
       if (!this.showToolbar) {
         this.sortKeyword = ''
+        this.selectedAreas = []
+        this.selectedSearchClassNames = []
         this.selectedYears.start = 0
         this.selectedYears.end = new Date().getFullYear()
       }
-      let filteredData = this.list.filter(x => (this.selectedAreas.length === 0) || this.selectedAreas.includes(x.area))
+      let filteredData = this.showFind ? this.searchContents : this.list
+      if (this.showFind) filteredData = filteredData.filter(x => (this.selectedSearchClassNames.length === 0) || this.selectedSearchClassNames.includes(x.type))
+      filteredData = filteredData.filter(x => (this.selectedAreas.length === 0) || this.selectedAreas.includes(x.area))
       filteredData = filteredData.filter(res => !this.setting.excludeR18Films || !this.containsR18Keywords(res.type))
       filteredData = filteredData.filter(res => res.year >= this.selectedYears.start)
       filteredData = filteredData.filter(res => res.year <= this.selectedYears.end)
-      this.selectedClassName = this.type.name + '    ' + filteredData.length + '/' + this.recordcount
+      if (!this.showFind) this.selectedClassName = this.type.name + '    ' + filteredData.length + '/' + this.recordcount
       switch (this.sortKeyword) {
         case '按上映年份':
           filteredData.sort(function (a, b) {
@@ -457,11 +521,22 @@ export default {
         default:
           break
       }
-      this.filteredList = filteredData
+      if (this.showFind) {
+        this.filteredSearchContents = filteredData
+      } else {
+        this.filteredList = filteredData
+      }
     },
-    updateSearchViewMode () {
+    toggleViewMode () {
+      if (this.showFind) {
+        this.setting.searchViewMode = this.setting.searchViewMode === 'picture' ? 'table' : 'picture'
+        setTimeout(() => { if (this.$refs.filmSearchWaterfall) this.$refs.filmSearchWaterfall.refresh() }, 700)
+      } else {
+        this.setting.view = this.setting.view === 'picture' ? 'table' : 'picture'
+      }
       setting.find().then(res => {
-        res.searchViewMode = this.searchViewMode
+        res.searchViewMode = this.setting.searchViewMode
+        res.view = this.setting.view
         setting.update(res)
       })
     },
@@ -476,9 +551,8 @@ export default {
       return date.split(/\s/)[0]
     },
     getFilters (column) {
-      const searchContents = this.searchContents.filter(res => !this.setting.excludeR18Films || (res.type !== undefined && !this.containsR18Keywords(res.type)))
-      if (column === 'siteName') return [...new Set(searchContents.map(row => row.site.name))].map(e => { return { text: e, value: e } }) // 有方法合并这两行吗？
-      return [...new Set(searchContents.map(row => row[column]))].map(e => { return { text: e, value: e } })
+      if (column === 'siteName') return [...new Set(this.filteredSearchContents.map(row => row.site.name))].map(e => { return { text: e, value: e } }) // 有方法合并这两行吗？
+      return [...new Set(this.filteredSearchContents.map(row => row[column]))].map(e => { return { text: e, value: e } })
     },
     filterChange (filters) {
       // 一次只能一列
@@ -486,7 +560,7 @@ export default {
         const otherColumns = this.$refs.searchResultTable.columns.filter(col => col.id !== this.currentColumn.id)
         otherColumns.forEach(col => { col.filterable = false })
       } else {
-        const filterLabels = ['源站', '类型', '地区', '语言']
+        const filterLabels = ['源站', '语言']
         const columns = this.$refs.searchResultTable.columns.filter(col => filterLabels.includes(col.label))
         columns.forEach(col => { col.filterable = true })
       }
@@ -494,17 +568,20 @@ export default {
     siteClick (siteName) {
       this.list = []
       this.site = this.sites.find(x => x.name === siteName)
-      this.searchTxt = ''
-      this.show.find = false
+      if (this.searchGroup === '站内' && this.searchTxt) {
+        this.searchEvent()
+        return
+      } else {
+        this.searchTxt = ''
+      }
+      this.showFind = false
       this.classList = []
       if (FILM_DATA_CACHE[this.site.key]) {
         this.classList = FILM_DATA_CACHE[this.site.key].classList
-        this.show.class = true
         this.classClick(this.type.name)
       } else {
         this.getClass().then(res => {
           this.classList = res
-          this.show.class = true
           // cache classList data
           FILM_DATA_CACHE[this.site.key] = {
             classList: this.classList
@@ -514,20 +591,23 @@ export default {
       }
     },
     classClick (className) {
-      this.show.classList = false
       this.list = []
       this.type = this.classList.find(x => x.name === className)
+      this.infiniteHandlerCount = 0
       if (!this.type) {
         this.type = this.classList[0]
       }
+      if (this.type.name.endsWith('剧')) this.selectedAreas = []
       const cacheKey = this.site.key + '@' + this.type.tid
       if (FILM_DATA_CACHE[cacheKey]) {
+        this.totalpagecount = FILM_DATA_CACHE[cacheKey].totalpagecount
         this.pagecount = FILM_DATA_CACHE[cacheKey].pagecount
         this.recordcount = FILM_DATA_CACHE[cacheKey].recordcount
         this.list = FILM_DATA_CACHE[cacheKey].list
         this.areas = FILM_DATA_CACHE[cacheKey].areas
       } else {
         zy.page(this.site.key, this.type.tid).then(res => {
+          this.totalpagecount = res.pagecount
           this.pagecount = res.pagecount
           this.recordcount = res.recordcount
           this.infiniteId += 1
@@ -566,44 +646,61 @@ export default {
       }
       return this.r18KeyWords.some(v => name.includes(v))
     },
+    toFlipPagecount () {
+      // 似乎需要解析的网站的视频排序和其他m3u8采集站的顺序正好相反
+      if (this.site.jiexiUrl) {
+        return true
+      }
+      return false
+    },
     infiniteHandler ($state) {
       const key = this.site.key
       const typeTid = this.type.tid
-      const page = this.pagecount
+      var page = this.pagecount
+      if (this.toFlipPagecount()) {
+        page = this.totalpagecount - this.pagecount + 1
+      }
       this.statusText = ' '
       if (key === undefined || page < 1 || typeTid === undefined) {
         $state.complete()
         this.statusText = '暂无数据'
         return false
       }
-      zy.list(key, page, typeTid).then(res => {
-        if (res) {
-          this.pagecount -= 1
-          const type = Object.prototype.toString.call(res)
-          if (type === '[object Undefined]') {
-            $state.complete()
+      if (this.showToolbar && this.filteredList.length && this.filteredList.length < 10) {
+        this.infiniteHandlerCount++
+      }
+      const interval = this.setting.view === 'picture' ? 1200 : 300
+      setTimeout(() => {
+        zy.list(key, page, typeTid).then(res => {
+          if (res) {
+            this.pagecount -= 1
+            const type = Object.prototype.toString.call(res)
+            if (type === '[object Undefined]') {
+              $state.complete()
+            }
+            if (type === '[object Array]') {
+              if (!this.toFlipPagecount()) {
+                // zy.list 返回的是按时间从旧到新排列, 我门需要翻转为从新到旧
+                this.list.push(...res.reverse())
+              } else {
+                // 如果是需要解析的视频网站，zy.list已经是按从新到旧排列
+                this.list.push(...res)
+              }
+            }
+            if (type === '[object Object]') {
+              this.list.push(res)
+            }
+            $state.loaded()
+            // 更新缓存数据
+            const cacheKey = this.site.key + '@' + typeTid
+            FILM_DATA_CACHE[cacheKey] = {
+              pagecount: this.pagecount,
+              recordcount: this.recordcount,
+              list: this.list
+            }
           }
-          if (type === '[object Array]') {
-            // zy.list 返回的是按时间从旧到新排列, 我门需要翻转为从新到旧
-            this.list.push(...res.reverse())
-          }
-          if (type === '[object Object]') {
-            this.list.push(res)
-          }
-          $state.loaded()
-          // 数据更新后,刷新页面
-          if (this.setting.view === 'picture' && this.$refs.filmWaterfall) {
-            this.$refs.filmWaterfall.refresh()
-          }
-          // 更新缓存数据
-          const cacheKey = this.site.key + '@' + typeTid
-          FILM_DATA_CACHE[cacheKey] = {
-            pagecount: this.pagecount,
-            recordcount: this.recordcount,
-            list: this.list
-          }
-        }
-      })
+        })
+      }, (this.infiniteHandlerCount <= 1 ? 0 : this.infiniteHandlerCount - 1) * interval)
     },
     detailEvent (site, e) {
       this.detail = {
@@ -620,9 +717,6 @@ export default {
       } else {
         this.video = { key: site.key, info: { id: e.id, name: e.name, index: 0, site: site } }
       }
-      zy.detail(site.key, e.id).then(detailRes => {
-        this.video.detail = detailRes
-      })
       this.view = 'Play'
     },
     async starEvent (site, e) {
@@ -630,17 +724,19 @@ export default {
       if (db) {
         this.$message.info('已存在')
       } else {
-        zy.detail(site.key, e.id).then(detailRes => {
-          const docs = {
-            key: site.key,
-            ids: e.id,
-            site: site,
-            name: e.name,
-            detail: detailRes
-          }
-          star.add(docs).then(res => {
-            this.$message.success('收藏成功')
-          })
+        const cacheKey = site.key + '@' + e.id
+        if (!this.DetailCache[cacheKey]) {
+          this.DetailCache[cacheKey] = await zy.detail(site.key, e.id)
+        }
+        const docs = {
+          key: site.key,
+          ids: e.id,
+          site: site,
+          name: e.name,
+          detail: this.DetailCache[cacheKey]
+        }
+        star.add(docs).then(res => {
+          this.$message.success('收藏成功')
         })
       }
     },
@@ -651,43 +747,17 @@ export default {
         info: e
       }
     },
-    downloadEvent (site, row) {
-      const key = site.key
-      const id = row.id
-      zy.download(key, id).then(res => {
-        if (res && res.m3u8List) {
-          const list = res.m3u8List.split('#')
-          let downloadUrl = ''
-          for (const i of list) {
-            const url = encodeURI(i.split('$')[1])
-            downloadUrl += (url + '\n')
-          }
-          clipboard.writeText(downloadUrl)
-          this.$message.success('『MP4』格式的链接已复制, 快去下载吧!')
-        } else {
-          zy.detail(key, id).then(res => {
-            const list = [...res.m3u8List]
-            let downloadUrl = ''
-            for (const i of list) {
-              const url = encodeURI(i.split('$')[1])
-              downloadUrl += (url + '\n')
-            }
-            clipboard.writeText(downloadUrl)
-            this.$message.success('『M3U8』格式的链接已复制, 快去下载吧!')
-          })
-        }
+    async downloadEvent (site, row) {
+      const db = await history.find({ site: site.key, ids: row.id })
+      let videoFlag
+      if (db) videoFlag = db.videoFlag
+      zy.download(site.key, row.id, videoFlag).then(res => {
+        clipboard.writeText(res.downloadUrls)
+        this.$message.success(res.info)
+      }).catch((err) => {
+        this.$message.error(err.info)
       })
     },
-    changeView () {
-      if (this.view === 'Film') {
-        this.getAllSites()
-        if (this.setting.view === 'picture') {
-          if (this.$refs.filmWaterfall) {
-            this.$refs.filmWaterfall.refresh()
-          }
-        }
-      }
-    },
     querySearch (queryString, cb) {
       var searchList = this.searchList.slice(0, -1)
       var results = queryString ? searchList.filter(this.createFilter(queryString)) : this.searchList
@@ -721,6 +791,9 @@ export default {
         this.searchList.push({ id: this.searchList.length + 1, keywords: '清除历史记录...' })
       })
     },
+    stopSearchEvent () {
+      this.searchRunning = false
+    },
     searchEvent () {
       const wd = this.searchTxt
       if (this.setting.searchGroup !== this.searchGroup) {
@@ -729,64 +802,53 @@ export default {
       }
       if (!wd) return
       this.searchID += 1
-      var searchSites = []
-      if (this.searchGroup === '站内') searchSites.push(this.site)
-      if (this.searchGroup === '全站') searchSites = this.sites
-      if (!searchSites.length) {
-        searchSites = this.sites.filter(site => site.group === this.searchGroup)
-      }
       this.searchContents = []
-      this.show.find = true
-      this.show.class = false
+      this.showFind = true
       this.statusText = ' '
-      if (wd) {
-        searchSites.forEach(site => {
-          const id = this.searchID
-          zy.search(site.key, wd).then(res => {
-            if (id !== this.searchID) return
-            const type = Object.prototype.toString.call(res)
-            if (type === '[object Array]') {
-              res.forEach(element => {
-                zy.detail(site.key, element.id).then(detailRes => {
-                  detailRes.site = site
-                  if (id !== this.searchID) return
-                  this.searchContents.push(detailRes)
-                  this.searchContents.sort(function (a, b) {
-                    return a.site.id - b.site.id
-                  })
-                  this.statusText = '暂无数据'
-                })
-              })
-            }
-            if (type === '[object Object]') {
-              zy.detail(site.key, res.id).then(detailRes => {
+      this.searchRunning = true
+      this.siteSearchCount = 0
+      this.searchSites.forEach(site => {
+        const id = this.searchID
+        zy.search(site.key, wd).then(res => {
+          if (id !== this.searchID || !this.searchRunning) return
+          const type = Object.prototype.toString.call(res)
+          if (type === '[object Array]') {
+            let count = 0
+            res.forEach(element => {
+              zy.detail(site.key, element.id).then(detailRes => {
+                if (id !== this.searchID || !this.searchRunning) return
                 detailRes.site = site
-                if (id !== this.searchID) return
                 this.searchContents.push(detailRes)
                 this.searchContents.sort(function (a, b) {
                   return a.site.id - b.site.id
                 })
-                this.statusText = '暂无数据'
+              }).finally(() => { count++; if (count === res.length) { this.siteSearchCount++; this.statusText = '暂无数据' } })
+            })
+          } else if (type === '[object Object]') {
+            zy.detail(site.key, res.id).then(detailRes => {
+              if (id !== this.searchID || !this.searchRunning) return
+              detailRes.site = site
+              this.searchContents.push(detailRes)
+              this.searchContents.sort(function (a, b) {
+                return a.site.id - b.site.id
               })
-            }
-          })
-        })
-      }
+            }).finally(() => { this.siteSearchCount++; this.statusText = '暂无数据' })
+          } else if (res === undefined) {
+            this.siteSearchCount++
+            this.statusText = '暂无数据'
+            if (this.searchGroup === '站内') this.$message.info('没有查询到数据！')
+          }
+        }).catch(() => { this.siteSearchCount++; if (this.searchGroup === '站内') this.$message.error('本次查询状态异常，未获取到数据！') })
+      })
     },
     searchAndRecord () {
       this.addSearchRecord()
       this.searchEvent()
     },
     searchChangeEvent () {
-      if (this.searchTxt.length >= 1) {
-        this.show.class = false
-      } else {
-        this.show.class = true
+      if (!this.searchTxt.length) {
         this.searchContents = []
-        this.show.find = false
-        if (this.setting.view === 'picture' && this.$refs.filmWaterfall) {
-          this.$refs.filmWaterfall.refresh()
-        }
+        this.showFind = false
       }
     },
     getAllSites () {
@@ -809,28 +871,20 @@ export default {
         this.searchGroup = this.setting.searchGroup
         if (this.searchGroup === undefined) setting.find().then(res => { this.searchGroup = res.searchGroup })
       })
-    },
-    getSearchViewMode () {
-      setting.find().then(res => {
-        this.searchViewMode = res.searchViewMode === undefined ? 'picture' : res.searchViewMode
-      })
     }
   },
   created () {
     this.getAllSites()
     this.getSearchHistory()
-    this.getSearchViewMode()
   },
   mounted () {
-    window.addEventListener('resize', () => {
-      if (this.$refs.filmWaterfall && this.view === 'Film') {
-        this.$refs.filmWaterfall.resize()
-        this.$refs.filmWaterfall.refresh()
-        setTimeout(() => {
-          this.$refs.filmWaterfall.refresh()
-        }, 500)
-      }
-    }, false)
+    addEventListener('resize', () => {
+      setTimeout(() => {
+        this.showTableLastColumn = window.outerWidth >= 1200
+        if (this.$refs.filmWaterfall) this.$refs.filmWaterfall.resize()
+        if (this.$refs.filmSearchWaterfall) this.$refs.filmSearchWaterfall.resize()
+      }, 500)
+    })
   }
 }
 </script>

src/components/History.vue

@@ -1,14 +1,23 @@
 <template>
   <div class="listpage" id="history">
     <div class="listpage-header" id="history-header">
-        <el-switch v-model="viewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="table" @change="updateViewMode"></el-switch>
-        <el-button @click.stop="exportHistory" icon="el-icon-upload2">导出</el-button>
-        <el-button @click.stop="importHistory" icon="el-icon-download">导入</el-button>
-        <el-button @click.stop="clearAllHistory" icon="el-icon-delete-solid">清空</el-button>
+        <el-switch v-model="setting.historyViewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="table" @change="updateViewMode"></el-switch>
+        <el-button @click.stop="exportHistory" icon="el-icon-upload2" title="导出全部，自动添加扩展名">导出</el-button>
+        <el-button @click.stop="importHistory" icon="el-icon-download" title="支持同时导入多个文件">导入</el-button>
+        <el-button @click.stop="removeSelectedItems" icon="el-icon-delete-solid">{{ multipleSelection.length === 0 ? "清空" : "删除所选" }}</el-button>
     </div>
     <div class="listpage-body" id="history-body">
-      <div class="show-table" id="history-table" v-show="viewMode === 'table'">
-        <el-table size="mini" fit height="100%" :data="history" row-key="id" @row-click="detailEvent">
+      <div class="show-table" id="history-table" v-if="setting.historyViewMode === 'table'">
+        <el-table size="mini" fit height="100%"
+          :data="history"
+          row-key="id"
+          ref="historyTable"
+          @select="selectionCellClick"
+          @selection-change="handleSelectionChange"
+          @row-click="detailEvent">
+          <el-table-column
+            type="selection">
+          </el-table-column>
           <el-table-column
             prop="name"
             label="片名">
@@ -26,8 +35,8 @@
             width="180"
             label="观看至">
             <template slot-scope="scope">
-              <span v-if="scope.row.detail && scope.row.detail.m3u8List && scope.row.detail.m3u8List.length > 1">
-                第{{ scope.row.index + 1 }}集(共{{scope.row.detail.m3u8List.length}}集)
+              <span v-if="scope.row.detail && scope.row.detail.fullList[0].list && scope.row.detail.fullList[0].list.length > 1">
+                第{{ scope.row.index + 1 }}集(共{{scope.row.detail.fullList[0].list.length}}集)
               </span>
             </template>
           </el-table-column>
@@ -36,6 +45,7 @@
             label="时间进度">
             <template slot-scope="scope">
                <span v-if="scope.row.time && scope.row.duration">{{fmtMSS(scope.row.time.toFixed(0))}}/{{fmtMSS(scope.row.duration.toFixed(0))}}</span>
+               <span v-if="scope.row.onlinePlay">在线解析</span>
             </template>
           </el-table-column>
           <el-table-column
@@ -52,7 +62,7 @@
           </el-table-column>
         </el-table>
       </div>
-      <div class="show-picture" id="star-picture" v-show="viewMode === 'picture'">
+      <div class="show-picture" id="star-picture" v-if="setting.historyViewMode === 'picture'">
         <Waterfall ref="historyWaterfall" :list="history" :gutter="20" :width="240"
           :breakpoints="{
             1200: { //当屏幕宽度小于等于1200
@@ -85,8 +95,9 @@
                  <span v-if="props.data.time && props.data.duration">
                     {{fmtMSS(props.data.time.toFixed(0))}}/{{fmtMSS(props.data.duration.toFixed(0))}}
                   </span>
-                  <span v-if="props.data.detail && props.data.detail.m3u8List !== undefined && props.data.detail.m3u8List.length > 1">
-                    第{{ props.data.index + 1 }}集(共{{props.data.detail.m3u8List.length}}集)
+                  <span v-if="props.data.onlinePlay">在线解析</span>
+                  <span v-if="props.data.detail && props.data.detail.fullList[0].list !== undefined && props.data.detail.fullList[0].list.length > 1">
+                    第{{ props.data.index + 1 }}集(共{{props.data.detail.fullList[0].list.length}}集)
                   </span>
                 </div>
               </div>
@@ -112,7 +123,10 @@ export default {
     return {
       history: [],
       sites: [],
-      viewMode: setting.historyViewMode
+      shiftDown: false,
+      selectionBegin: '',
+      selectionEnd: '',
+      multipleSelection: []
     }
   },
   components: {
@@ -150,22 +164,57 @@ export default {
       set (val) {
         this.SET_SHARE(val)
       }
+    },
+    setting: {
+      get () {
+        return this.$store.getters.getSetting
+      },
+      set (val) {
+        this.SET_SETTING(val)
+      }
     }
   },
   watch: {
     view () {
-      this.getAllhistory()
-      this.getAllsites()
-      if (this.$refs.historyWaterfall) {
-        this.$refs.historyWaterfall.refresh()
+      if (this.view === 'History') {
+        this.getAllhistory()
+        this.getAllsites()
+        if (this.setting.historyViewMode === 'table') this.showShiftPrompt()
       }
     }
   },
   methods: {
-    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
+    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE', 'SET_SETTING']),
     fmtMSS (s) {
       return (s - (s %= 60)) / 60 + (s > 9 ? ':' : ':0') + s
     },
+    selectionCellClick (selection, row) { // 历史id与顺序刚好相反，大的反而在前面
+      if (this.shiftDown && this.selectionBegin !== '' && selection.includes(row)) {
+        this.selectionEnd = row.id
+        const start = this.history.findIndex(e => e.id === Math.max(this.selectionBegin, this.selectionEnd))
+        const end = this.history.findIndex(e => e.id === Math.min(this.selectionBegin, this.selectionEnd))
+        const selections = this.history.slice(start, end + 1)
+        this.$nextTick(() => {
+          selections.forEach(e => this.$refs.historyTable.toggleRowSelection(e, true))
+        })
+        this.selectionBegin = this.selectionEnd = ''
+        return
+      }
+      if (selection.includes(row)) {
+        this.selectionBegin = row.id
+      } else {
+        this.selectionBegin = ''
+      }
+    },
+    handleSelectionChange (rows) {
+      this.multipleSelection = rows
+    },
+    removeSelectedItems () {
+      if (!this.multipleSelection.length) this.multipleSelection = this.history
+      this.multipleSelection.forEach(e => history.remove(e.id))
+      this.getAllhistory()
+      this.updateDatabase()
+    },
     detailEvent (e) {
       this.detail = {
         show: true,
@@ -183,43 +232,21 @@ export default {
       } else {
         this.video = { key: e.site, info: { id: e.ids, name: e.name, index: 0 } }
       }
-      zy.detail(e.site, e.ids).then(detailRes => {
-        this.video.detail = detailRes
-      })
       this.view = 'Play'
     },
     shareEvent (e) {
       this.share = {
         show: true,
         key: e.site,
-        info: e
+        info: e.detail
       }
     },
     downloadEvent (e) {
-      const key = e.site
-      const id = e.ids
-      zy.download(key, id).then(res => {
-        if (res && res.m3u8List) {
-          const list = res.m3u8List.split('#')
-          let downloadUrl = ''
-          for (const i of list) {
-            const url = encodeURI(i.split('$')[1])
-            downloadUrl += (url + '\n')
-          }
-          clipboard.writeText(downloadUrl)
-          this.$message.success('『MP4』格式的链接已复制, 快去下载吧!')
-        } else {
-          zy.detail(key, id).then(res => {
-            const list = [...res.m3u8List]
-            let downloadUrl = ''
-            for (const i of list) {
-              const url = encodeURI(i.split('$')[1])
-              downloadUrl += (url + '\n')
-            }
-            clipboard.writeText(downloadUrl)
-            this.$message.success('『M3U8』格式的链接已复制, 快去下载吧!')
-          })
-        }
+      zy.download(e.site, e.ids, e.videoFlag).then(res => {
+        clipboard.writeText(res.downloadUrls)
+        this.$message.success(res.info)
+      }).catch((err) => {
+        this.$message.error(err.info)
       })
     },
     exportHistory () {
@@ -233,6 +260,7 @@ export default {
       }
       remote.dialog.showSaveDialog(options).then(result => {
         if (!result.canceled) {
+          if (!result.filePath.endsWith('.json')) result.filePath += '.json'
           fs.writeFileSync(result.filePath, str)
           this.$message.success('已保存成功')
         }
@@ -260,11 +288,6 @@ export default {
         }
       })
     },
-    clearAllHistory () {
-      history.clear().then(res => {
-        this.history = []
-      })
-    },
     getAllhistory () {
       history.all().then(res => {
         this.history = res.reverse()
@@ -288,10 +311,10 @@ export default {
         this.$message.warning('删除历史记录失败, 错误信息: ' + err)
       })
     },
-    updateDatabase (data) {
+    updateDatabase () {
       history.clear().then(res => {
         var id = length
-        data.forEach(ele => {
+        this.history.forEach(ele => {
           ele.id = id
           id -= 1
           history.add(ele)
@@ -299,43 +322,51 @@ export default {
       })
     },
     rowDrop () {
+      if (!document.getElementById('history-table')) return
       const tbody = document.getElementById('history-table').querySelector('.el-table__body-wrapper tbody')
       const _this = this
       Sortable.create(tbody, {
         onEnd ({ newIndex, oldIndex }) {
           const currRow = _this.history.splice(oldIndex, 1)[0]
           _this.history.splice(newIndex, 0, currRow)
-          _this.updateDatabase(_this.history)
+          _this.updateDatabase()
         }
       })
     },
-    getViewMode () {
-      setting.find().then(res => {
-        this.viewMode = res.historyViewMode
-      })
-    },
     updateViewMode () {
+      if (this.setting.historyViewMode === 'table') {
+        setTimeout(() => { this.rowDrop() }, 100)
+        this.showShiftPrompt()
+      } else {
+        setTimeout(() => { if (this.$refs.historyWaterfall) this.$refs.historyWaterfall.refresh() }, 700)
+      }
       setting.find().then(res => {
-        res.historyViewMode = this.viewMode
+        res.historyViewMode = this.setting.historyViewMode
         setting.update(res)
       })
+    },
+    showShiftPrompt () {
+      if (this.setting.shiftTooltipLimitTimes === undefined) this.setting.shiftTooltipLimitTimes = 5
+      if (this.setting.shiftTooltipLimitTimes) {
+        this.$message.info('多选时支持shift快捷键')
+        this.setting.shiftTooltipLimitTimes--
+        setting.find().then(res => {
+          res.shiftTooltipLimitTimes = this.setting.shiftTooltipLimitTimes
+          setting.update(res)
+        })
+      }
     }
   },
   mounted () {
-    this.rowDrop()
-    window.addEventListener('resize', () => {
-      if (this.$refs.historyWaterfall && this.view === 'History') {
-        this.$refs.historyWaterfall.resize()
-        this.$refs.historyWaterfall.refresh()
-        setTimeout(() => {
-          this.$refs.historyWaterfall.refresh()
-        }, 500)
-      }
-    }, false)
+    if (this.setting.historyViewMode === 'table') setTimeout(() => { this.rowDrop() }, 100)
+    addEventListener('keydown', code => { if (code.keyCode === 16) this.shiftDown = true })
+    addEventListener('keyup', code => { if (code.keyCode === 16) this.shiftDown = false })
+    addEventListener('resize', () => {
+      setTimeout(() => { if (this.$refs.historyWaterfall) this.$refs.historyWaterfall.resize() }, 500)
+    })
   },
   created () {
     this.getAllhistory()
-    this.getViewMode()
   }
 }
 </script>

src/components/IPTV.vue

@@ -2,17 +2,17 @@
   <div class="listpage" id="iptv">
     <div class="listpage-header" id="iptv-header" v-show="!enableBatchEdit">
         <el-switch v-model="enableBatchEdit" active-text="批处理及频道调整"></el-switch>
-        <el-button @click.stop="exportChannels" icon="el-icon-upload2" >导出</el-button>
-        <el-button @click.stop="importChannels" icon="el-icon-download">导入</el-button>
-        <el-button @click="checkAllChannels" icon="el-icon-refresh" :loading="checkAllChannelsLoading">检测{{ this.checkAllChannelsLoading ? this.checkProgress + '/' + this.iptvList.length : '' }}</el-button>
+        <el-button @click.stop="exportChannels" icon="el-icon-upload2" title="导出m3u时必须手动添加扩展名，要保存频道配置信息请选择json格式">导出</el-button>
+        <el-button @click.stop="importChannels" icon="el-icon-download" title='支持同时导入多个文件,导入m3u时网址可带参数、含有"#"号时自动分割'>导入</el-button>
+        <el-button @click="checkAllChannels" icon="el-icon-refresh" :loading="checkAllChannelsLoading" title="可在后台运行">检测{{ this.checkAllChannelsLoading ? this.checkProgress + '/' + this.iptvList.length : '' }}</el-button>
         <el-button @click.stop="resetChannelsEvent" icon="el-icon-refresh-left">重置</el-button>
     </div>
     <div class="listpage-header" id="iptv-header" v-show="enableBatchEdit">
         <el-switch v-model="enableBatchEdit" active-text="批处理及频道调整"></el-switch>
         <el-input placeholder="新组名/新频道名" v-model="inputContent"></el-input>
         <el-switch v-model="batchIsActive" active-text="启用"></el-switch>
-        <el-button type="primary" icon="el-icon-edit" @click.stop="saveBatchEdit">保存分组与开关状态</el-button>
-        <el-button type="primary" icon="el-icon-film" @click.stop="mergeChannel">{{ this.multipleSelection.length === 1 ? '频道重命名' : '频道合并' }}</el-button>
+        <el-button type="primary" icon="el-icon-edit" @click.stop="saveBatchEdit" title="输入框组名为空时仅保存开关状态">保存分组与开关状态</el-button>
+        <el-button type="primary" icon="el-icon-film" @click.stop="mergeChannel" title="勾选单个时可重命名频道">{{ this.multipleSelection.length === 1 ? '频道重命名' : '频道合并' }}</el-button>
         <el-button @click.stop="removeSelectedChannels" icon="el-icon-delete-solid">删除</el-button>
     </div>
     <div class="listpage-body" id="iptv-table">
@@ -107,7 +107,7 @@
 </template>
 <script>
 import { mapMutations } from 'vuex'
-import { iptv, channelList } from '../lib/dexie'
+import { iptv, channelList, setting } from '../lib/dexie'
 import { iptv as defaultChannels } from '../lib/dexie/initData'
 import zy from '../lib/site/tools'
 import { remote } from 'electron'
@@ -143,8 +143,13 @@ export default {
         this.SET_VIEW(val)
       }
     },
-    setting () {
-      return this.$store.getters.getSetting
+    setting: {
+      get () {
+        return this.$store.getters.getSetting
+      },
+      set (val) {
+        this.SET_SETTING(val)
+      }
     },
     video: {
       get () {
@@ -175,11 +180,6 @@ export default {
     }
   },
   watch: {
-    view () {
-      if (this.view === 'IPTV' && !this.checkAllChannelsLoading) {
-        this.getChannelList()
-      }
-    },
     enableBatchEdit () {
       if (this.checkAllChannelsLoading) {
         this.$message.info('正在检测, 请勿操作.')
@@ -187,6 +187,15 @@ export default {
         return
       }
       if (this.enableBatchEdit) {
+        if (this.setting.shiftTooltipLimitTimes === undefined) this.setting.shiftTooltipLimitTimes = 5
+        if (this.setting.shiftTooltipLimitTimes) {
+          this.$message.info('多选时支持shift快捷键')
+          this.setting.shiftTooltipLimitTimes--
+          setting.find().then(res => {
+            res.shiftTooltipLimitTimes = this.setting.shiftTooltipLimitTimes
+            setting.update(res)
+          })
+        }
         this.$nextTick(() => {
           this.expandedRows.forEach(e => this.$refs.iptvTable.toggleRowExpansion(e, false))
         })
@@ -197,7 +206,7 @@ export default {
     }
   },
   methods: {
-    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
+    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE', 'SET_SETTING']),
     sortByLocaleCompare (a, b) {
       return a.localeCompare(b, 'zh')
     },
@@ -318,6 +327,7 @@ export default {
             fs.writeFileSync(result.filePath, writer.toString())
             this.$message.success('已保存成功')
           } else {
+            if (!result.filePath.endsWith('.json')) result.filePath += '.json'
             const arr = [...this.channelList] // 要保存channelList必须选json
             const str = JSON.stringify(arr, null, 2)
             fs.writeFileSync(result.filePath, str)
@@ -550,6 +560,7 @@ export default {
       }
     },
     async checkAllChannels () {
+      if (this.checkAllChannelsLoading) return
       this.checkAllChannelsLoading = true
       this.stopFlag = false
       this.checkProgress = 0
@@ -560,6 +571,7 @@ export default {
       await this.checkChannelsBySite(other).then(res => {
         this.checkAllChannelsLoading = false
         this.getChannelList()
+        if (!this.stopFlag) this.$message.success('直播频道批量检测已完成！')
       })
     },
     async checkChannelsBySite (channels) {

src/components/Play.vue

@@ -4,11 +4,16 @@
       <div class="title">
         <span v-if="this.right.list.length > 1">『第 {{(video.info.index + 1)}} 集』</span>{{name}}
       </div>
-      <div class="player">
+      <div class="player" v-show="!onlineUrl">
         <div id="xgplayer"></div>
       </div>
+      <div class="iframePlayer" v-if="onlineUrl" style='width:100%;height:100%;'>
+        <iframe v-bind:src="onlineUrl" width="100%" height="100%"
+          frameborder="0" scrolling="no" allow='autoplay;fullscreen'>
+        </iframe>
+      </div>
       <div class="more" v-if="!video.iptv" :key="Boolean(video.iptv)">
-        <span class="zy-svg" @click="otherEvent" v-show="name !== ''">
+        <span class="zy-svg" @click="otherEvent" v-show="name !== ''" :class="right.type === 'other' ? 'active' : ''">
           <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="coloursIconTitle">
             <title id="coloursIconTitle">换源</title>
             <circle cx="12" cy="9" r="5"></circle>
@@ -84,7 +89,7 @@
             <rect x="17" y="6" width="1" height="1"></rect>
           </svg>
         </span>
-        <span class="zy-svg" @click="showShortcutEvent" v-show="right.list.length > 0">
+        <span class="zy-svg" @click="showShortcutEvent" :class="right.type === 'shortcut' ? 'active' : ''" v-show="right.list.length > 0">
           <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="sendIconTitle">
             <title id="sendIconTitle">快捷键指南</title>
             <polygon points="21.368 12.001 3 21.609 3 14 11 12 3 9.794 3 2.394"></polygon>
@@ -98,25 +103,32 @@
             <circle cx="12" cy="12" r="10"></circle>
           </svg>
         </span>
-        <span class="timespan" v-if="right.list.length > 1">
-          <label>片头长度：</label>
+        <span class="timespanSwitch" v-if="right.list.length > 1 && !onlineUrl" title="跳过片头片尾，建议优先通过快捷键设置，更便捷更精准">
+          <el-switch v-model="state.showTimespanSetting" active-text="手动跳略时长"></el-switch>
+        </span>
+        <span class="timespan" v-if="state.showTimespanSetting">
+          <label>片头：</label>
           <input type="number" v-model="startPosition.min" style="width:45px" min="00" max="59" placeholder="00" required>
           <label>:</label>
           <input type="number" v-model="startPosition.sec" style="width:45px" min="00" max="59" placeholder="00" required>
           <span></span>
-          <label>片尾长度：</label>
+          <label>片尾：</label>
           <input type="number" v-model="endPosition.min" style="width:45px" min="00" max="59" placeholder="00" required>
           <label>:</label>
           <input type="number" v-model="endPosition.sec" style="width:45px" min="00" max="59" placeholder="00" required>
           <span></span>
-          <input type="button" value="确定" @click="setProgressDotByInput" title="还可以通过快捷键设置">
+          <input type="button" value="确定" @click="setProgressDotByInput">
           <span></span>
           <input type="button" value="重置" @click="() => { startPosition.min = startPosition.sec = endPosition.min = endPosition.sec = '00'; this.clearPosition() }">
         </span>
-        <span class="last-tip" v-if="!video.key && right.history.length > 0" @click="historyItemEvent(right.history[0])">上次播放到【{{right.history[0].site}}】{{right.history[0].name}} 第{{right.history[0].index+1}}集</span>
+        <span class="last-tip" v-if="!video.key && right.history.length > 0 && right.history[0]" @click="historyItemEvent(right.history[0])">
+          <span>上次播放到:【{{right.history[0].site}}】{{right.history[0].name}} 第{{right.history[0].index+1}}集 </span>
+          <span v-if="right.history[0].time && right.history[0].duration">{{fmtMSS(right.history[0].time.toFixed(0))}}/{{fmtMSS(right.history[0].duration.toFixed(0))}}</span>
+          <span v-if="right.history[0].onlinePlay">在线解析</span>
+        </span>
       </div>
       <div class="more" v-if="video.iptv" :key="Boolean(video.iptv)">
-        <span class="zy-svg" @click="channelListShow = !channelListShow">
+        <span class="zy-svg" @click="state.showChannelList = !state.showChannelList" :class="state.showChannelList ? 'active' : ''">
           <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="dashboardIconTitle">
             <title id="dashboardIconTitle">频道列表</title>
             <rect width="20" height="20" x="2" y="2"></rect>
@@ -126,7 +138,7 @@
             <line x1="7" y1="17" x2="7" y2="17"></line>
           </svg>
         </span>
-        <span class="zy-svg" @click="otherEvent">
+        <span class="zy-svg" @click="otherEvent" :class="right.type === 'sources' ? 'active' : ''">
           <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="coloursIconTitle">
             <title id="coloursIconTitle">换源</title>
             <circle cx="12" cy="9" r="5"></circle>
@@ -147,7 +159,7 @@
             <polyline stroke-linejoin="round" points="8 4 12 7.917 16 4"></polyline>
           </svg>
         </span>
-        <span class="zy-svg" @click="showShortcutEvent">
+        <span class="zy-svg" @click="showShortcutEvent" :class="right.type === 'shortcut' ? 'active' : ''">
           <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="sendIconTitle">
             <title id="sendIconTitle">快捷键指南</title>
             <polygon points="21.368 12.001 3 21.609 3 14 11 12 3 9.794 3 2.394"></polygon>
@@ -171,24 +183,24 @@
           </span>
         </div>
         <div class="list-body zy-scroll" :style="{overflowY:scroll? 'auto' : 'hidden',paddingRight: scroll ? '0': '5px' }" @mouseenter="scroll = true" @mouseleave="scroll = false">
-          <ul v-if="right.type === 'list'" class="list-item"  v-on-clickaway="closeListEvent">
-            <li v-if="right.list.length > 0" @click="exportM3u8">导出</li>
+          <ul v-if="right.type === 'list'" class="list-item"  v-clickoutside="closeListEvent">
+            <li v-if="exportablePlaylist" @click="exportM3u8">导出</li>
             <li v-if="right.list.length === 0">无数据</li>
             <li @click="listItemEvent(j)" :class="video.info.index === j ? 'active' : ''" v-for="(i, j) in right.list" :key="j">{{i | ftName(j)}}</li>
           </ul>
-          <ul v-if="right.type === 'history'" class="list-history"  v-on-clickaway="closeListEvent">
+          <ul v-if="right.type === 'history'" class="list-history"  v-clickoutside="closeListEvent">
             <li v-if="right.history.length > 0" @click="clearAllHistory">清空</li>
             <li v-if="right.history.length === 0">无数据</li>
             <li @click="historyItemEvent(m)" :class="video.info.id === m.ids ? 'active' : ''" v-for="(m, n) in right.history" :key="n"><span class="title" :title="'【' + m.site + '】' + m.name + ' 第' + (m.index+1) + '集'">【{{m.site}}】{{m.name}} 第{{m.index+1}}集</span><span @click.stop="removeHistoryItem(m)" class="detail-delete">删除</span></li>
           </ul>
-          <ul v-if="right.type === 'shortcut'" class="list-shortcut"  v-on-clickaway="closeListEvent">
+          <ul v-if="right.type === 'shortcut'" class="list-shortcut"  v-clickoutside="closeListEvent">
             <li v-for="(m, n) in right.shortcut" :key="n"><span class="title">{{m.desc}} -- [ {{m.key}} ]</span></li>
           </ul>
-          <ul v-if="right.type === 'other'" class="list-other" v-on-clickaway="closeListEvent">
+          <ul v-if="right.type === 'other'" class="list-other" v-clickoutside="closeListEvent">
             <li v-if="right.other.length === 0">无数据</li>
             <li @click="otherItemEvent(m)" v-for="(m, n) in right.other" :key="n"><span class="title">{{m.name}} - [{{m.site.name}}]</span></li>
           </ul>
-          <ul v-if="right.type === 'sources'" class="list-channels" v-on-clickaway="closeListEvent">
+          <ul v-if="right.type === 'sources'" class="list-channels" v-clickoutside="closeListEvent">
             <li v-if="right.sources.length === 0">当前频道已关闭</li>
             <li v-for="(channel, index) in right.sources" :key="index">
               <span @click="playChannel(channel)" class="title">{{ channel.id === video.iptv.id ? channel.name + '[当前]' : channel.name }}</span>
@@ -199,10 +211,10 @@
       </div>
     </transition>
     <transition name="slideX">
-      <div v-if="channelListShow" class="list">
+      <div v-if="state.showChannelList" class="list" v-clickoutside="closeListEvent">
          <div class="list-top">
           <span class="list-top-title">频道列表</span>
-          <span class="list-top-close zy-svg" @click="channelListShow = false">
+          <span class="list-top-close zy-svg" @click="state.showChannelList = false">
             <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="closeIconTitle">
               <title id="closeIconTitle">关闭</title>
               <path d="M6.34314575 6.34314575L17.6568542 17.6568542M6.34314575 17.6568542L17.6568542 6.34314575"></path>
@@ -212,13 +224,13 @@
         <div class="list-body zy-scroll" :style="{overflowY:scroll? 'auto' : 'hidden',paddingRight: scroll ? '0': '5px' }" @mouseenter="scroll = true" @mouseleave="scroll = false">
           <el-input
             clearable
-            size="small"
+            size="small" title="支持按拼音首字母搜索"
             v-model.trim="searchTxt"
             placeholder="搜索">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
           </el-input>
           <el-tree ref="channelTree"
-            :data="channelListForShow"
+            :data="channelTree"
             :props="defaultProps"
             accordion
             :filter-node-method="filterNode"
@@ -235,8 +247,9 @@ import { star, history, setting, shortcut, mini, channelList, sites } from '../l
 import zy from '../lib/site/tools'
 import Player from 'xgplayer'
 import HlsJsPlayer from 'xgplayer-hls.js'
+import FlvJsPlayer from 'xgplayer-flv.js'
 import mt from 'mousetrap'
-import { directive as onClickaway } from 'vue-clickaway'
+import Clickoutside from 'element-ui/src/utils/clickoutside'
 import { exec, execFile } from 'child_process'
 
 const { remote, clipboard } = require('electron')
@@ -323,31 +336,37 @@ export default {
         videoTitle: true,
         airplay: true,
         closeVideoTouch: true,
-        ignores: ['cssFullscreen', 'replay'],
+        ignores: ['cssFullscreen', 'replay', 'error'], // 为了切换播放器类型时避免显示错误刷新，暂时忽略错误
         preloadTime: 300
       },
       state: {
         showList: false,
-        showHistory: false
+        showHistory: false,
+        showChannelList: false,
+        showTimespanSetting: false
       },
       name: '',
       length: 0,
       timer: null,
       scroll: false,
       isStar: false,
-      isTop: false,
       miniMode: false,
       mainWindowBounds: {},
       searchTxt: '',
       channelList: [],
-      channelListForShow: [],
-      channelListShow: false,
+      channelTree: [],
+      isLive: false,
       defaultProps: {
         label: 'label',
         children: 'children'
       },
-      startPosition: { min: '00', sec: '00' },
-      endPosition: { min: '00', sec: '00' }
+      startPosition: { min: '00', sec: '00' }, // 对应调略输入框
+      endPosition: { min: '00', sec: '00' },
+      skipendStatus: false, // 是否跳过了片尾
+      currentShortcutList: [],
+      onlineUrl: '',
+      playerType: 'hls',
+      exportablePlaylist: false
     }
   },
   filters: {
@@ -361,7 +380,7 @@ export default {
     }
   },
   directives: {
-    onClickaway: onClickaway
+    Clickoutside
   },
   computed: {
     view: {
@@ -404,18 +423,31 @@ export default {
         this.SET_APPSTATE(val)
       }
     },
-    setting () {
-      return this.$store.getters.getSetting
+    setting: {
+      get () {
+        return this.$store.getters.getSetting
+      },
+      set (val) {
+        this.SET_SETTING(val)
+      }
+    },
+    DetailCache: {
+      get () {
+        return this.$store.getters.getDetailCache
+      },
+      set (val) {
+        this.SET_DetailCache(val)
+      }
     }
   },
   watch: {
     view () {
-      this.right.show = false
-      this.right.type = ''
       if (this.view === 'Play') {
+        this.right.show = false
+        this.right.type = ''
         this.getChannelList()
-        if (this.video.key === '' && !this.video.iptv) {
-          this.channelListShow = true
+        if (this.video.key === '' && !this.isLive) {
+          this.state.showChannelList = true
         }
       }
     },
@@ -459,14 +491,16 @@ export default {
     }
   },
   methods: {
-    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE', 'SET_APPSTATE']),
-    leadingZero (time) {
+    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE', 'SET_APPSTATE', 'SET_DetailCache']),
+    fmtMSS (s) {
+      return (s - (s %= 60)) / 60 + (s > 9 ? ':' : ':0') + s
+    },
+    leadingZero (time) { // 格式化单个调略输入框
       Object.keys(time).forEach(key => {
         if (time[key] > 59 || time[key] < 0) {
           time[key] = '00'
         } else if (time[key].length > 2) {
           time[key] = '' + parseInt(time[key])
-          // time[key] = time[key].replace(/^0+/, '')
         } else if (time[key] < 10 && time[key].length === 1) {
           time[key] = '0' + time[key]
         }
@@ -483,10 +517,11 @@ export default {
     },
     async getUrls () {
       if (this.video.key === '') {
-        if (!this.video.iptv) this.channelListShow = true
+        if (!this.video.iptv) this.state.showChannelList = true
         return false
       }
       this.name = ''
+      this.onlineUrl = ''
       if (this.timer !== null) {
         clearInterval(this.timer)
         this.timer = null
@@ -499,19 +534,21 @@ export default {
         // 是直播源，直接播放
         this.playChannel(this.video.iptv)
       } else {
-        this.channelListShow = false
+        this.state.showChannelList = false
         const index = this.video.info.index || 0
         const db = await history.find({ site: this.video.key, ids: this.video.info.id })
         const key = this.video.key + '@' + this.video.info.id
         var time = this.video.info.time
         this.xg.removeAllProgressDot()
-        this.startPosition = this.endPosition = { min: '00', sec: '00' }
+        this.startPosition = { min: '00', sec: '00' }
+        this.endPosition = { min: '00', sec: '00' }
         if (db) {
           if (!time && db.index === index) { // 如果video.info.time没有设定的话，从历史中读取时间进度
             time = db.time
           }
           if (!VIDEO_DETAIL_CACHE[key]) VIDEO_DETAIL_CACHE[key] = {}
-          if (db.startPosition) {
+          if (!this.video.info.videoFlag) this.video.info.videoFlag = db.videoFlag
+          if (db.startPosition) { // 数据库保存的时长通过快捷键设置时可能为小数, this.startPosition为object对应输入框分秒转化到数据库后肯定为整数
             VIDEO_DETAIL_CACHE[key].startPosition = db.startPosition
             this.startPosition = { min: '' + parseInt(db.startPosition / 60), sec: '' + parseInt(db.startPosition % 60) }
           }
@@ -534,6 +571,8 @@ export default {
       channelList.add(ele)
     },
     playChannel (channel) {
+      this.isLive = true
+      this.getPlayer('hls')
       if (channel.channels) {
         this.right.sources = channel.channels.filter(e => e.isActive)
         channel = channel.prefer ? channel.channels.find(e => e.id === channel.prefer) : channel.channels.filter(e => e.isActive)[0]
@@ -548,120 +587,152 @@ export default {
       this.name = channel.name
       this.xg.src = channel.url
       this.xg.play()
-      document.querySelector('xg-btn-quitMiniMode').style.display = 'none'
       document.querySelector('xg-btn-showhistory').style.display = 'none'
       document.querySelector('.xgplayer-playbackrate').style.display = 'none'
     },
+    getPlayer (playerType, force = false) {
+      if (!force && this.playerType === playerType) return
+      this.xg.src = ''
+      this.config.url = ''
+      this.xg.destroy()
+      this.xg = null
+      switch (playerType) {
+        case 'mp4':
+          this.xg = new Player(this.config)
+          break
+        case 'flv':
+          this.xg = new FlvJsPlayer(this.config)
+          break
+        default:
+          this.xg = new HlsJsPlayer(this.config)
+      }
+      this.playerInstall()
+      this.bindEvent()
+      this.playerType = playerType
+    },
     playVideo (index = 0, time = 0) {
-      document.querySelector('xg-btn-quitMiniMode').style.display = 'none'
-      document.querySelector('xg-btn-showhistory').style.display = 'block'
-      document.querySelector('.xgplayer-playbackrate').style.display = 'inline-block'
-      this.fetchM3u8List().then(m3u8Arr => {
-        const url = m3u8Arr[index]
-        if (!m3u8Arr[index].endsWith('.m3u8')) {
-          const onlineUrl = 'https://www.1717yun.com/jiexi/?url=' + url
-          const open = require('open')
-          open(onlineUrl)
-        } else {
-          this.xg.src = m3u8Arr[index]
-          const key = this.video.key + '@' + this.video.info.id
-          const startTime = VIDEO_DETAIL_CACHE[key].startPosition || 0
-          this.xg.play()
-          this.xg.once('playing', () => {
-            this.xg.currentTime = time > startTime ? time : startTime
-            if (VIDEO_DETAIL_CACHE[key].startPosition) this.xg.addProgressDot(VIDEO_DETAIL_CACHE[key].startPosition, '片头')
-            if (VIDEO_DETAIL_CACHE[key].endPosition) this.xg.addProgressDot(this.xg.duration - VIDEO_DETAIL_CACHE[key].endPosition, '片尾')
-          })
-          this.videoPlaying()
-          VIDEO_DETAIL_CACHE[key].skipend = false
-          this.xg.once('ended', () => {
-            if (m3u8Arr.length > 1 && (m3u8Arr.length - 1 > index)) {
-              this.video.info.time = 0
-              this.video.info.index++
-            }
-            this.xg.off('ended')
-          })
+      this.isLive = false
+      this.exportablePlaylist = false
+      this.fetchPlaylist().then(async (fullList) => {
+        var playlist = fullList[0].list // ZY支持的已移到首位
+        // 如果设定了特定的video flag, 获取该flag下的视频列表
+        const videoFlag = this.video.info.videoFlag
+        if (videoFlag) {
+          playlist = fullList.find(x => x.flag === videoFlag).list
         }
+        this.right.list = playlist
+        var url = playlist[index].split('$')[1]
+        if (playlist.every(e => e.split('$')[1].endsWith('.m3u8'))) this.exportablePlaylist = true
+        if (!url.endsWith('.m3u8') && !url.endsWith('.mp4')) {
+          const currentSite = await sites.find({ key: this.video.key })
+          this.$message.info('即将调用解析接口播放，请等待...')
+          if (currentSite.jiexiUrl) {
+            this.onlineUrl = currentSite.jiexiUrl + url
+          } else {
+            this.onlineUrl = 'https://jx.7kjx.com/?url=' + url
+          }
+          this.videoPlaying('online')
+          return
+        } else {
+          const ext = url.match(/\.\w+?$/)[0].slice(1)
+          this.getPlayer(ext)
+        }
+        this.xg.src = url
+        const key = this.video.key + '@' + this.video.info.id
+        const startTime = VIDEO_DETAIL_CACHE[key].startPosition || 0
+        this.xg.play()
+        if (document.querySelector('xg-btn-showhistory')) document.querySelector('xg-btn-showhistory').style.display = 'block'
+        if (document.querySelector('.xgplayer-playbackrate')) document.querySelector('.xgplayer-playbackrate').style.display = 'inline-block'
+        this.xg.once('playing', () => {
+          this.xg.currentTime = time > startTime ? time : startTime
+          if (VIDEO_DETAIL_CACHE[key].startPosition) this.xg.addProgressDot(VIDEO_DETAIL_CACHE[key].startPosition, '片头')
+          if (VIDEO_DETAIL_CACHE[key].endPosition) this.xg.addProgressDot(this.xg.duration - VIDEO_DETAIL_CACHE[key].endPosition, '片尾')
+        })
+        this.videoPlaying()
+        this.skipendStatus = false
+        this.xg.once('ended', () => {
+          if (playlist.length > 1 && (playlist.length - 1 > index)) {
+            this.video.info.time = 0
+            this.video.info.index++
+          }
+          this.xg.off('ended') // 明明是once为何会触发多次，得注销掉以真正只执行一次
+        })
       })
     },
-    fetchM3u8List () {
+    fetchPlaylist () {
       return new Promise((resolve) => {
         const cacheKey = this.video.key + '@' + this.video.info.id
         if (VIDEO_DETAIL_CACHE[cacheKey] && VIDEO_DETAIL_CACHE[cacheKey].list && VIDEO_DETAIL_CACHE[cacheKey].list.length) {
           this.name = VIDEO_DETAIL_CACHE[cacheKey].name
           resolve(VIDEO_DETAIL_CACHE[cacheKey].list)
         }
-        zy.detail(this.video.key, this.video.info.id).then(res => {
+        let res
+        if (!this.DetailCache[cacheKey]) {
+          zy.detail(this.video.key, this.video.info.id).then(res => {
+            this.DetailCache[cacheKey] = res
+            res = this.DetailCache[cacheKey]
+            this.name = res.name
+            VIDEO_DETAIL_CACHE[cacheKey] = Object.assign(VIDEO_DETAIL_CACHE[cacheKey] || { }, {
+              list: res.fullList,
+              name: res.name
+            })
+            resolve(res.fullList)
+          })
+        } else {
+          res = this.DetailCache[cacheKey]
           this.name = res.name
-          const m3u8Txt = res.m3u8List
-          this.right.list = m3u8Txt
-          const m3u8Arr = []
-          for (const i of m3u8Txt) {
-            const j = i.split('$')
-            if (j.length > 1) {
-              for (let m = 0; m < j.length; m++) {
-                if (j[m].startsWith('http')) {
-                  m3u8Arr.push(j[m])
-                  break
-                }
-              }
-            } else {
-              m3u8Arr.push(j[0])
-            }
-          }
-
-          VIDEO_DETAIL_CACHE[cacheKey] = Object.assign(VIDEO_DETAIL_CACHE[cacheKey] || {}, {
-            list: m3u8Arr,
+          VIDEO_DETAIL_CACHE[cacheKey] = Object.assign(VIDEO_DETAIL_CACHE[cacheKey] || { }, {
+            list: res.fullList,
             name: res.name
           })
-          resolve(m3u8Arr)
-        })
+          resolve(res.fullList)
+        }
       })
     },
-    async videoPlaying () {
-      this.changeVideo()
+    async videoPlaying (isOnline) {
       const db = await history.find({ site: this.video.key, ids: this.video.info.id })
+      const videoFlag = this.video.info.videoFlag || ''
+      let time = this.xg.currentTime || 0
+      let duration = this.xg.duration || 0
+      let startPosition = 0
+      let endPosition = 0
       if (db) {
-        const doc = {
-          site: db.site,
-          ids: db.ids,
-          name: db.name,
-          type: db.type,
-          year: db.year,
-          index: this.video.info.index,
-          time: db.time,
-          detail: this.video.detail
-        }
-        history.update(db.id, doc)
-      } else {
-        const doc = {
-          site: this.video.key,
-          ids: this.video.info.id,
-          name: this.video.info.name,
-          type: this.video.info.type,
-          year: this.video.info.year,
-          index: this.video.info.index,
-          time: '',
-          detail: this.video.detail
-        }
-        history.add(doc)
+        time = time || db.time
+        duration = duration || db.duration
+        startPosition = db.startPosition
+        endPosition = db.endPosition
+        await history.remove(db.id)
       }
+      if (isOnline) {
+        time = duration = 0
+      }
+      const doc = {
+        site: this.video.key,
+        ids: this.video.info.id,
+        name: this.video.info.name,
+        type: this.video.info.type,
+        year: this.video.info.year,
+        index: this.video.info.index,
+        time: time,
+        duration: duration,
+        startPosition: startPosition,
+        endPosition: endPosition,
+        detail: this.DetailCache[this.video.key + '@' + this.video.info.id],
+        onlinePlay: isOnline,
+        videoFlag: videoFlag
+      }
+      await history.add(doc)
       this.updateStar()
-      this.timerEvent()
+      if (!isOnline) this.timerEvent()
     },
-    changeVideo () {
-      win.setProgressBar(-1)
-      this.checkStar()
-      this.checkTop()
-    },
-    async setProgressDotEvent (position, timespan, text) {
+    async setProgressDotEvent (position, timespan, text) { // 根据跳略时长在进度条上添加标记, position为位置, timespan为时长，text为标记文本(title)
       const key = this.video.key + '@' + this.video.info.id
       const db = await history.find({ site: this.video.key, ids: this.video.info.id })
-      if (db && this.xg && VIDEO_DETAIL_CACHE[key].list.length > 1) {
+      if (db && this.xg && this.right.list.length > 1) {
         this[position] = { min: '' + parseInt(timespan / 60), sec: '' + parseInt(timespan % 60) }
         const positionTime = position === 'endPosition' ? this.xg.duration - timespan : timespan
         if (db[position]) this.xg.removeProgressDot(position === 'endPosition' ? this.xg.duration - db[position] : db[position])
-        this.xg.addProgressDot(positionTime, text)
+        if (parseInt(this[position].min) || parseInt(this[position].sec)) this.xg.addProgressDot(positionTime, text) // 均为0时不添加标记
         const doc = { ...db }
         doc[position] = timespan
         delete doc.id
@@ -669,7 +740,7 @@ export default {
         VIDEO_DETAIL_CACHE[key][position] = timespan
       }
     },
-    async setProgressDotByInput () {
+    async setProgressDotByInput () { // 对应调略输入框后的“确定”
       this.xg.removeAllProgressDot()
       const startTime = parseInt(this.startPosition.min) * 60 + parseInt(this.startPosition.sec)
       const endTime = parseInt(this.endPosition.min) * 60 + parseInt(this.endPosition.sec)
@@ -687,10 +758,6 @@ export default {
     },
     timerEvent () {
       this.timer = setInterval(async () => {
-        const endTime = this.xg.duration
-        const currentTime = this.xg.currentTime
-        const progress = parseFloat((currentTime / endTime).toFixed(2))
-        win.setProgressBar(progress)
         const db = await history.find({ site: this.video.key, ids: this.video.info.id })
         if (db) {
           const doc = { ...db }
@@ -747,6 +814,7 @@ export default {
       }
     },
     historyEvent () {
+      this.state.showChannelList = false
       if (this.right.type === 'history') {
         this.right.show = false
         this.right.type = ''
@@ -765,13 +833,15 @@ export default {
       const info = this.video.info
       const db = await star.find({ key: this.video.key, ids: info.id })
       if (db) {
+        this.isStar = true
         db.index = info.index
         star.update(db.id, db)
+      } else {
+        this.isStar = false
       }
     },
     async starEvent () {
-      const info = this.video.info
-      const db = await star.find({ key: this.video.key, ids: info.id })
+      const db = await star.find({ key: this.video.key, ids: this.video.info.id })
       if (db) {
         star.remove(db.id).then(res => {
           if (res) {
@@ -782,18 +852,16 @@ export default {
           }
         })
       } else {
-        zy.detail(this.video.key, info.id).then(detailRes => {
-          const docs = {
-            key: this.video.key,
-            ids: info.id,
-            name: info.name,
-            detail: detailRes,
-            index: info.index
-          }
-          star.add(docs).then(res => {
-            this.$message.success('收藏成功')
-            this.isStar = true
-          })
+        const docs = {
+          key: this.video.key,
+          ids: this.video.info.id,
+          name: this.video.info.name,
+          detail: this.DetailCache[this.video.key + '@' + this.video.info.id],
+          index: this.video.info.index
+        }
+        star.add(docs).then(res => {
+          this.$message.success('收藏成功')
+          this.isStar = true
         })
       }
     },
@@ -836,14 +904,14 @@ export default {
       this.share = {
         show: true,
         key: this.video.key,
-        info: this.video.info
+        info: this.DetailCache[this.video.key + '@' + this.video.info.id]
       }
     },
     issueEvent () {
       const info = {
         video: this.video,
         list: this.right.list,
-        m3u8List: VIDEO_DETAIL_CACHE[this.video.key + '@' + this.video.info.id] || [],
+        playlist: VIDEO_DETAIL_CACHE[this.video.key + '@' + this.video.info.id] || [],
         playerError: this.xg.error || '',
         playerState: this.xg.readyState || '',
         networkState: this.xg.networkState || ''
@@ -853,8 +921,8 @@ export default {
     },
     playWithExternalPalyerEvent () {
       const fs = require('fs')
+      const externalPlayer = this.setting.externalPlayer
       if (this.video.iptv) {
-        var externalPlayer = this.setting.externalPlayer
         if (!externalPlayer) {
           this.$message.error('请设置第三方播放器路径')
           return
@@ -864,25 +932,30 @@ export default {
         } else {
           exec(externalPlayer, [this.video.iptv.url])
         }
-        return
-      }
-      this.fetchM3u8List().then(m3u8Arr => {
-        var externalPlayer = this.setting.externalPlayer
+      } else {
+        const playlistUrls = this.right.list.map(e => e.split('$')[1])
         if (!externalPlayer) {
           this.$message.error('请设置第三方播放器路径')
           // 在线播放该视频
-          var link = 'https://www.m3u8play.com/?play=' + m3u8Arr[this.video.info.index]
-          const open = require('open')
-          open(link)
+          if (playlistUrls[this.video.info.index].endsWith('.m3u8')) {
+            var link = 'https://www.m3u8play.com/?play=' + playlistUrls[this.video.info.index]
+            const open = require('open')
+            open(link)
+          }
         } else {
-          var m3uFile = this.generateM3uFile(this.video.info.name, m3u8Arr, this.video.info.index)
-          if (fs.existsSync(externalPlayer)) {
-            execFile(externalPlayer, [m3uFile])
+          let playlist
+          if (playlistUrls.every(e => e.endsWith('.m3u8'))) {
+            playlist = this.generateM3uFile(this.video.info.name, playlistUrls, this.video.info.index)
           } else {
-            exec(externalPlayer, [m3uFile])
+            playlist = playlistUrls[this.video.info.index]
+          }
+          if (fs.existsSync(externalPlayer)) {
+            execFile(externalPlayer, [playlist])
+          } else {
+            exec(externalPlayer, [playlist])
           }
         }
-      })
+      }
     },
     generateM3uFile (fileName, m3u8Arr, startIndex) {
       const path = require('path')
@@ -901,20 +974,18 @@ export default {
       fs.writeFileSync(filePath, str)
       return filePath
     },
-    async checkStar () {
-      const db = await star.find({ key: this.video.key, ids: this.video.info.id })
-      if (db) {
-        this.isStar = true
-      } else {
-        this.isStar = false
-      }
-    },
-    checkTop () {
-      this.isTop = this.appState.windowIsOnTop
-    },
     closeListEvent () {
-      this.right.show = false
-      this.right.type = ''
+      const lastRightType = this.right.type
+      const lastChannelListState = this.state.showChannelList
+      setTimeout(() => {
+        if (lastRightType === this.right.type) {
+          this.right.show = false
+          this.right.type = ''
+        }
+        if (lastChannelListState === this.state.showChannelList) {
+          this.state.showChannelList = false
+        }
+      }, 50)
     },
     exportM3u8 () {
       const m3u8Arr = []
@@ -938,15 +1009,15 @@ export default {
           link: link
         })
       }
-      let m3u8Content = '#EXTM3U'
+      let m3u8Content = '#EXTM3U\n'
       for (const item of m3u8Arr) {
-        m3u8Content += `#EXTINF:-1, ${item.name}\n${item.link}`
+        m3u8Content += `#EXTINF:-1, ${item.name}\n${item.link}\n`
       }
       const blob = new Blob([m3u8Content], { type: 'application/vnd.apple.mpegurl' })
       const downloadElement = document.createElement('a')
       const href = window.URL.createObjectURL(blob)
       downloadElement.href = href
-      downloadElement.download = `${this.name}.m3u8`
+      downloadElement.download = `${this.name}.m3u`
       document.body.appendChild(downloadElement)
       downloadElement.click()
       document.body.removeChild(downloadElement)
@@ -1023,7 +1094,6 @@ export default {
         this.getOtherSites()
         this.right.currentTime = this.xg.currentTime
       } else {
-        this.channelListShow = false
         this.right.type = 'sources'
       }
       this.right.show = true
@@ -1033,6 +1103,7 @@ export default {
       this.video = { key: e.key, info: { id: e.id, name: e.name, site: e.site, index: this.video.info.index, time: this.right.currentTime } }
     },
     mtEvent () {
+      if (this.setting.shortcutModified) this.currentShortcutList.forEach(e => mt.unbind(e.key))
       setting.find().then(res => {
         if (res.shortcut) {
           shortcut.all().then(res => {
@@ -1043,14 +1114,22 @@ export default {
                 }
               })
             }
+            this.currentShortcutList = res
           })
         } else {
           shortcut.all().then(res => {
             for (const i of res) {
               mt.unbind(i.key)
             }
+            this.currentShortcutList = []
           })
         }
+      }).finally(() => {
+        this.setting.shortcutModified = false
+        setting.find().then(res => {
+          res.shortcutModified = this.setting.shortcutModified
+          setting.update(res)
+        })
       })
     },
     async shortcutEvent (e) {
@@ -1058,8 +1137,6 @@ export default {
         if (this.xg) {
           if (this.xg.paused) {
             this.xg.play()
-            // 继续播放时,隐藏进度条
-            win.setProgressBar(-1)
           } else {
             this.xg.pause()
           }
@@ -1312,14 +1389,14 @@ export default {
     async getChannelList () {
       await channelList.all().then(res => {
         this.channelList = res.filter(e => e.isActive)
-        this.channelListForShow = []
+        this.channelTree = []
         const groups = [...new Set(this.channelList.map(iptv => iptv.group))]
         groups.forEach(g => {
           var doc = {
             label: g,
             children: this.channelList.filter(x => x.group === g).map(i => { return { label: i.name, channel: i } })
           }
-          this.channelListForShow.push(doc)
+          this.channelTree.push(doc)
         })
       })
     },
@@ -1337,9 +1414,9 @@ export default {
         const key = this.video.key + '@' + this.video.info.id
         if (VIDEO_DETAIL_CACHE[key] && VIDEO_DETAIL_CACHE[key].endPosition) {
           const time = this.xg.duration - VIDEO_DETAIL_CACHE[key].endPosition - this.xg.currentTime
-          if (time > 0 && time < 0.3) {
-            if (!VIDEO_DETAIL_CACHE[key].skipend) {
-              VIDEO_DETAIL_CACHE[key].skipend = true
+          if (time > 0 && time < 0.3) { // timeupdate每0.25秒触发一次，只有自然播放到该点时才会跳过片尾
+            if (!this.skipendStatus) {
+              this.skipendStatus = true
               this.xg.emit('ended')
             }
           }
@@ -1392,26 +1469,38 @@ export default {
       this.xg.on('exitFullscreen', () => {
         document.querySelector('.xg-view-videoTitle').style.display = 'none'
       })
+
+      this.xg.on('play', () => {
+        if (!this.video.key) {
+          if (!this.video.iptv && !this.video.info.ids) {
+            // 如果当前播放页面的播放信息没有被赋值,播放历史记录
+            if (this.right.history.length === 0) {
+              this.$message.error('历史记录为空，无法播放！')
+              this.videoStop()
+              return
+            }
+            var historyItem = this.right.history[0]
+            this.video = { key: historyItem.site, info: { id: historyItem.ids, name: historyItem.name, index: historyItem.index } }
+          } else if (this.video.iptv && !this.isLive) {
+            this.playChannel(this.video.iptv)
+            this.state.showChannelList = false
+          }
+        }
+      })
     },
     videoStop () {
-      win.setProgressBar(-1)
       if (this.xg.fullscreen) {
         this.xg.exitFullscreen()
       }
       clearInterval(this.timer)
       this.video.key = ''
-      this.xg.src = ''
-      this.config.url = ''
-      this.xg.destroy(false)
-      this.xg = null
       this.name = ''
+      this.isLive = false
+      this.state.showChannelList = true
+      this.state.showTimespanSetting = false
       this.right.list = []
       this.getAllhistory()
-      setTimeout(() => {
-        this.xg = new HlsJsPlayer(this.config)
-        this.playerInstall()
-        this.bindEvent()
-      }, 1000)
+      this.getPlayer(this.playerType, true)
     },
     minMaxEvent () {
       win.on('minimize', () => {
@@ -1420,9 +1509,7 @@ export default {
         }
       })
       win.on('restore', () => {
-        // 不知为何，在if clause里直接使用this.xg.hasStart居然就不工作，不得其解。
-        var hasStart = this.xg.hasStart
-        if (this.xg && hasStart) {
+        if (this.xg && this.xg.hasStart) {
           this.xg.play()
         }
       })
@@ -1459,11 +1546,16 @@ export default {
       })
     },
     showShortcutEvent () {
-      this.right.show = !this.right.show
-      shortcut.all().then(res => {
-        this.right.type = 'shortcut'
-        this.right.shortcut = res
-      })
+      if (this.right.type === 'shortcut') {
+        this.right.show = false
+        this.right.type = ''
+      } else {
+        this.right.show = true
+        shortcut.all().then(res => {
+          this.right.type = 'shortcut'
+          this.right.shortcut = res
+        })
+      }
     }
   },
   created () {
@@ -1508,6 +1600,9 @@ export default {
   cursor: pointer;
   margin-left: 3px;
 }
+.xgplayer-skin-default .xg-btn-quitMiniMode {
+  display: none;
+}
 .xgplayer-skin-default .xg-btn-playPrev:hover,
 .xgplayer-skin-default .xg-btn-playNextOne:hover,
 .xgplayer-skin-default .xg-btn-showList:hover,

src/components/Recommendation.vue

@@ -1,345 +1,322 @@
-<template>
-  <div class="listpage" id="recommendataions">
-    <div class="listpage-header" id="recommendataions-header">
-        <el-switch v-model="viewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="table" @change="updateViewMode"></el-switch>
-        <el-button type="text">视频数：{{ recommendations.length }}</el-button>
-        <el-select v-model="selectedAreas" size="small" multiple collapse-tags placeholder="地区" popper-class="popper" :popper-append-to-body="false">
-          <el-option
-            v-for="item in areas"
-            :key="item"
-            :label="item"
-            :value="item">
-          </el-option>
-        </el-select>
-        <el-select v-model="selectedTypes" size="small" multiple collapse-tags placeholder="类型" popper-class="popper" :popper-append-to-body="false">
-          <el-option
-            v-for="item in types"
-            :key="item"
-            :label="item"
-            :value="item">
-          </el-option>
-        </el-select>
-        <el-select v-model="sortKeyword" size="small" placeholder="排序" popper-class="popper" :popper-append-to-body="false">
-          <el-option
-            v-for="item in sortKeywords"
-            :key="item"
-            :label="item"
-            :value="item">
-          </el-option>
-        </el-select>
-        <el-button :loading="loading" @click.stop="updateEvent" icon="el-icon-refresh">更新推荐</el-button>
-    </div>
-    <div class="listpage-body" id="recommendataions-body" >
-      <div class="show-table" id="star-table" v-show="viewMode === 'table'">
-        <el-table size="mini" fit height="100%" row-key="id"
-        ref="recommendataionsTable"
-        :data="filteredRecommendations"
-        @row-click="detailEvent">
-          <el-table-column
-            prop="name"
-            label="片名">
-          </el-table-column>
-          <el-table-column
-            prop="detail.area"
-            label="地区"
-            width="100">
-          </el-table-column>
-          <el-table-column
-            prop="detail.type"
-            label="类型"
-            width="100">
-          </el-table-column>
-          <el-table-column
-            prop="detail.year"
-            label="上映"
-            width="100"
-            align="center">
-          </el-table-column>
-          <el-table-column v-if="filteredRecommendations.some(e => e.rate)"
-            prop="rate"
-            align="center"
-            width="100"
-            label="豆瓣评分">
-          </el-table-column>
-          <el-table-column v-if="filteredRecommendations.some(e => e.detail.note)"
-            prop="detail.note"
-            label="备注">
-          </el-table-column>
-          <el-table-column
-            label="操作"
-            header-align="center"
-            align="right"
-            width="200">
-            <template slot-scope="scope">
-              <el-button @click.stop="playEvent(scope.row)" type="text">播放</el-button>
-              <el-button @click.stop="shareEvent(scope.row)" type="text">分享</el-button>
-              <el-button @click.stop="downloadEvent(scope.row)" type="text">下载</el-button>
-              <el-button @click.stop="deleteEvent(scope.row)" type="text">删除</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <div class="show-picture" id="star-picture" v-show="viewMode === 'picture'">
-        <Waterfall ref="recommendataionsWaterfall" :list="filteredRecommendations" :gutter="20" :width="240"
-          :breakpoints="{
-            1200: { //当屏幕宽度小于等于1200
-              rowPerView: 4,
-            },
-            800: { //当屏幕宽度小于等于800
-              rowPerView: 3,
-            },
-            500: { //当屏幕宽度小于等于500
-              rowPerView: 2,
-            }
-          }"
-          animationDuration="0.5s"
-          backgroundColor="rgba(0, 0, 0, 0)">
-            <template slot="item" slot-scope="props">
-              <div class="card">
-                <div class="img">
-                  <div class="rate" v-if="props.data.rate && props.data.rate !== '暂无评分'">
-                    <span>{{props.data.rate}}分</span>
-                  </div>
-                  <img style="width: 100%" :src="props.data.detail.pic" alt="" @load="$refs.recommendataionsWaterfall.refresh()" @click="detailEvent(props.data)">
-                  <div class="operate">
-                    <div class="operate-wrap">
-                      <span class="o-play" @click="playEvent(props.data)">播放</span>
-                      <span class="o-share" @click="shareEvent(props.data)">分享</span>
-                      <span class="o-star" @click="downloadEvent(props.data)">下载</span>
-                      <span class="o-star" @click="deleteEvent(props.data)">删除</span>
-                    </div>
-                  </div>
-                </div>
-                <div class="name" @click="detailEvent(props.data)">{{props.data.name}}</div>
-                <div class="info">
-                  <span>{{props.data.detail.area}}</span>
-                  <span>{{props.data.detail.year}}</span>
-                  <span>{{props.data.detail.note}}</span>
-                  <span>{{props.data.detail.type}}</span>
-                </div>
-              </div>
-            </template>
-        </Waterfall>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { mapMutations } from 'vuex'
-import { history, recommendation, setting } from '../lib/dexie'
-import zy from '../lib/site/tools'
-import Waterfall from 'vue-waterfall-plugin'
-const { clipboard } = require('electron')
-export default {
-  name: 'recommendations',
-  data () {
-    return {
-      recommendations: [],
-      sites: [],
-      viewMode: 'picture',
-      loading: false,
-      types: [],
-      selectedTypes: [],
-      areas: [],
-      selectedAreas: [],
-      sortKeyword: '',
-      sortKeywords: ['上映', '评分', '默认']
-    }
-  },
-  components: {
-    Waterfall
-  },
-  computed: {
-    view: {
-      get () {
-        return this.$store.getters.getView
-      },
-      set (val) {
-        this.SET_VIEW(val)
-      }
-    },
-    video: {
-      get () {
-        return this.$store.getters.getVideo
-      },
-      set (val) {
-        this.SET_VIDEO(val)
-      }
-    },
-    detail: {
-      get () {
-        return this.$store.getters.getDetail
-      },
-      set (val) {
-        this.SET_DETAIL(val)
-      }
-    },
-    share: {
-      get () {
-        return this.$store.getters.getShare
-      },
-      set (val) {
-        this.SET_SHARE(val)
-      }
-    },
-    filteredRecommendations () {
-      var filteredData = this.recommendations.filter(x => (this.selectedAreas.length === 0) || this.selectedAreas.includes(x.detail.area))
-      filteredData = filteredData.filter(x => (this.selectedTypes.length === 0) || this.selectedTypes.includes(x.detail.type))
-      return filteredData
-    }
-  },
-  watch: {
-    view () {
-      if (this.view === 'Recommendation') {
-        this.getRecommendations()
-        if (this.$refs.recommendataionsWaterfall) {
-          this.$refs.recommendataionsWaterfall.refresh()
-        }
-      }
-    },
-    sortKeyword () {
-      switch (this.sortKeyword) {
-        case '上映':
-          this.recommendations = this.recommendations.sort(function (a, b) {
-            return b.detail.year - a.detail.year
-          })
-          break
-        case '评分':
-          this.recommendations.sort(function (a, b) {
-            return b.rate - a.rate
-          })
-          break
-        case '默认':
-          this.recommendations.sort(function (a, b) {
-            return b.id - a.id
-          })
-          break
-        default:
-          break
-      }
-    }
-  },
-  methods: {
-    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
-    detailEvent (e) {
-      this.detail = {
-        show: true,
-        key: e.key,
-        info: {
-          id: e.ids,
-          name: e.name
-        }
-      }
-    },
-    updateEvent () {
-      const url = 'https://raw.githubusercontent.com/cuiocean/ZY-Player-Resources/main/Recommendations/Recommendations.json'
-      this.loading = true
-      const axios = require('axios')
-      axios.get(url).then(res => {
-        if (res.status === 200) {
-          if (res.data.length > 0) {
-            this.recommendations = res.data
-            recommendation.clear().then(recommendation.bulkAdd(this.recommendations))
-            this.getFilterData()
-            this.$message.success('更新推荐成功. 仅根据作者cuiocean个人喜好推荐,不喜请无视.')
-          }
-        }
-        this.loading = false
-      }).catch(error => {
-        this.loading = false
-        this.$message.error('更新推荐失败. ' + error)
-        this.$message.warning('最新的推荐数据保存在Github上,请考虑使用代理或者等待下一版本内置数据更新.')
-      })
-    },
-    async playEvent (e) {
-      const db = await history.find({ site: e.key, ids: e.ids })
-      if (db) {
-        this.video = { key: e.key, info: { id: db.ids, name: db.name, index: db.index }, detail: db.detail }
-      } else {
-        this.video = { key: e.key, info: { id: e.ids, name: e.name, index: 0 }, detail: e.detail }
-      }
-      this.view = 'Play'
-    },
-    deleteEvent (e) {
-      recommendation.remove(e.id).then(res => {
-        if (res) {
-          this.$message.warning('删除失败')
-        }
-        this.getRecommendations()
-      })
-    },
-    shareEvent (e) {
-      this.share = {
-        show: true,
-        key: e.key,
-        info: e
-      }
-    },
-    downloadEvent (e) {
-      const key = e.key
-      const id = e.ids
-      zy.download(key, id).then(res => {
-        if (res && res.m3u8List) {
-          const list = res.m3u8List.split('#')
-          let downloadUrl = ''
-          for (const i of list) {
-            const url = encodeURI(i.split('$')[1])
-            downloadUrl += (url + '\n')
-          }
-          clipboard.writeText(downloadUrl)
-          this.$message.success('『MP4』格式的链接已复制, 快去下载吧!')
-        } else {
-          zy.detail(key, id).then(res => {
-            const list = [...res.m3u8List]
-            let downloadUrl = ''
-            for (const i of list) {
-              const url = encodeURI(i.split('$')[1])
-              downloadUrl += (url + '\n')
-            }
-            clipboard.writeText(downloadUrl)
-            this.$message.success('『M3U8』格式的链接已复制, 快去下载吧!')
-          })
-        }
-      })
-    },
-    getRecommendations () {
-      recommendation.all().then(res => {
-        this.recommendations = res.sort(function (a, b) {
-          return b.id - a.id
-        })
-        this.getFilterData()
-      })
-    },
-    getFilterData () {
-      this.types = [...new Set(this.recommendations.map(ele => ele.detail.type))].filter(x => x)
-      this.areas = [...new Set(this.recommendations.map(ele => ele.detail.area))].filter(x => x)
-    },
-    getViewMode () {
-      setting.find().then(res => {
-        this.viewMode = res.recommendationViewMode
-      })
-    },
-    updateViewMode () {
-      setting.find().then(res => {
-        res.recommendationViewMode = this.viewMode
-        setting.update(res)
-      })
-    }
-  },
-  created () {
-    this.getRecommendations()
-    this.getViewMode()
-  },
-  mounted () {
-    window.addEventListener('resize', () => {
-      if (this.$refs.recommendataionsWaterfall && this.view === 'Recommendation') {
-        this.$refs.recommendataionsWaterfall.resize()
-        this.$refs.recommendataionsWaterfall.refresh()
-        setTimeout(() => {
-          this.$refs.recommendataionsWaterfall.refresh()
-        }, 500)
-      }
-    }, false)
-  }
-}
-</script>
+<template>
+  <div class="listpage" id="recommendations">
+    <div class="listpage-header" id="recommendations-header">
+        <el-switch v-model="setting.recommendationViewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="table" @change="updateViewMode"></el-switch>
+        <el-button type="text">视频数：{{ recommendations.length }}</el-button>
+        <el-select v-model="selectedAreas" size="small" multiple placeholder="地区" popper-class="popper" :popper-append-to-body="false">
+          <el-option
+            v-for="item in areas"
+            :key="item"
+            :label="item"
+            :value="item">
+          </el-option>
+        </el-select>
+        <el-select v-model="selectedTypes" size="small" multiple placeholder="类型" popper-class="popper" :popper-append-to-body="false">
+          <el-option
+            v-for="item in types"
+            :key="item"
+            :label="item"
+            :value="item">
+          </el-option>
+        </el-select>
+        <el-select v-model="sortKeyword" size="small" placeholder="排序" popper-class="popper" :popper-append-to-body="false">
+          <el-option
+            v-for="item in sortKeywords"
+            :key="item"
+            :label="item"
+            :value="item">
+          </el-option>
+        </el-select>
+        <el-button :loading="loading" @click.stop="updateEvent" icon="el-icon-refresh">更新推荐</el-button>
+    </div>
+    <div class="listpage-body" id="recommendations-body" >
+      <div class="show-table" id="star-table" v-if="setting.recommendationViewMode === 'table'">
+        <el-table size="mini" fit height="100%" row-key="id"
+        ref="recommendationsTable"
+        :data="filteredRecommendations"
+        @row-click="detailEvent">
+          <el-table-column
+            prop="name"
+            label="片名">
+          </el-table-column>
+          <el-table-column
+            prop="detail.area"
+            label="地区"
+            width="100">
+          </el-table-column>
+          <el-table-column
+            prop="detail.type"
+            label="类型"
+            width="100">
+          </el-table-column>
+          <el-table-column
+            prop="detail.year"
+            label="上映"
+            width="100"
+            align="center">
+          </el-table-column>
+          <el-table-column v-if="filteredRecommendations.some(e => e.rate)"
+            prop="rate"
+            align="center"
+            width="100"
+            label="豆瓣评分">
+          </el-table-column>
+          <el-table-column v-if="filteredRecommendations.some(e => e.detail.note)"
+            prop="detail.note"
+            label="备注">
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            header-align="center"
+            align="right"
+            width="200">
+            <template slot-scope="scope">
+              <el-button @click.stop="playEvent(scope.row)" type="text">播放</el-button>
+              <el-button @click.stop="shareEvent(scope.row)" type="text">分享</el-button>
+              <el-button @click.stop="downloadEvent(scope.row)" type="text">下载</el-button>
+              <el-button @click.stop="deleteEvent(scope.row)" type="text">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="show-picture" id="star-picture" v-if="setting.recommendationViewMode === 'picture'">
+        <Waterfall ref="recommendationsWaterfall" :list="filteredRecommendations" :gutter="20" :width="240"
+          :breakpoints="{
+            1200: { //当屏幕宽度小于等于1200
+              rowPerView: 4,
+            },
+            800: { //当屏幕宽度小于等于800
+              rowPerView: 3,
+            },
+            500: { //当屏幕宽度小于等于500
+              rowPerView: 2,
+            }
+          }"
+          animationDuration="0.5s"
+          backgroundColor="rgba(0, 0, 0, 0)">
+            <template slot="item" slot-scope="props">
+              <div class="card">
+                <div class="img">
+                  <div class="rate" v-if="props.data.rate && props.data.rate !== '暂无评分'">
+                    <span>{{props.data.rate}}分</span>
+                  </div>
+                  <img style="width: 100%" :src="props.data.detail.pic" alt="" @load="$refs.recommendationsWaterfall.refresh()" @click="detailEvent(props.data)">
+                  <div class="operate">
+                    <div class="operate-wrap">
+                      <span class="o-play" @click="playEvent(props.data)">播放</span>
+                      <span class="o-share" @click="shareEvent(props.data)">分享</span>
+                      <span class="o-star" @click="downloadEvent(props.data)">下载</span>
+                      <span class="o-star" @click="deleteEvent(props.data)">删除</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="name" @click="detailEvent(props.data)">{{props.data.name}}</div>
+                <div class="info">
+                  <span>{{props.data.detail.area}}</span>
+                  <span>{{props.data.detail.year}}</span>
+                  <span>{{props.data.detail.note}}</span>
+                  <span>{{props.data.detail.type}}</span>
+                </div>
+              </div>
+            </template>
+        </Waterfall>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapMutations } from 'vuex'
+import { history, recommendation, setting } from '../lib/dexie'
+import zy from '../lib/site/tools'
+import Waterfall from 'vue-waterfall-plugin'
+const { clipboard } = require('electron')
+export default {
+  name: 'recommendations',
+  data () {
+    return {
+      recommendations: [],
+      sites: [],
+      loading: false,
+      types: [],
+      selectedTypes: [],
+      areas: [],
+      selectedAreas: [],
+      sortKeyword: '',
+      sortKeywords: ['上映', '评分', '默认']
+    }
+  },
+  components: {
+    Waterfall
+  },
+  computed: {
+    view: {
+      get () {
+        return this.$store.getters.getView
+      },
+      set (val) {
+        this.SET_VIEW(val)
+      }
+    },
+    video: {
+      get () {
+        return this.$store.getters.getVideo
+      },
+      set (val) {
+        this.SET_VIDEO(val)
+      }
+    },
+    detail: {
+      get () {
+        return this.$store.getters.getDetail
+      },
+      set (val) {
+        this.SET_DETAIL(val)
+      }
+    },
+    share: {
+      get () {
+        return this.$store.getters.getShare
+      },
+      set (val) {
+        this.SET_SHARE(val)
+      }
+    },
+    setting: {
+      get () {
+        return this.$store.getters.getSetting
+      },
+      set (val) {
+        this.SET_SETTING(val)
+      }
+    },
+    filteredRecommendations () {
+      var filteredData = this.recommendations.filter(x => (this.selectedAreas.length === 0) || this.selectedAreas.includes(x.detail.area))
+      filteredData = filteredData.filter(x => (this.selectedTypes.length === 0) || this.selectedTypes.includes(x.detail.type))
+      return filteredData
+    }
+  },
+  watch: {
+    view () {
+      if (this.view === 'Recommendation') {
+        if (this.$refs.recommendationsWaterfall) this.$refs.recommendationsWaterfall.resize()
+      }
+    },
+    sortKeyword () {
+      switch (this.sortKeyword) {
+        case '上映':
+          this.recommendations = this.recommendations.sort(function (a, b) {
+            return b.detail.year - a.detail.year
+          })
+          break
+        case '评分':
+          this.recommendations.sort(function (a, b) {
+            return b.rate - a.rate
+          })
+          break
+        case '默认':
+          this.recommendations.sort(function (a, b) {
+            return b.id - a.id
+          })
+          break
+        default:
+          break
+      }
+    }
+  },
+  methods: {
+    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE', 'SET_SETTING']),
+    detailEvent (e) {
+      this.detail = {
+        show: true,
+        key: e.key,
+        info: {
+          id: e.ids,
+          name: e.name
+        }
+      }
+    },
+    updateEvent () {
+      const url = 'https://raw.githubusercontent.com/cuiocean/ZY-Player-Resources/main/Recommendations/Recommendations.json'
+      this.loading = true
+      const axios = require('axios')
+      axios.get(url).then(res => {
+        if (res.status === 200) {
+          if (res.data.length > 0) {
+            this.recommendations = res.data
+            recommendation.clear().then(recommendation.bulkAdd(this.recommendations))
+            this.getFilterData()
+            this.$message.success('更新推荐成功. 仅根据作者cuiocean个人喜好推荐,不喜请无视.')
+          }
+        }
+        this.loading = false
+      }).catch(error => {
+        this.loading = false
+        this.$message.error('更新推荐失败. ' + error)
+        this.$message.warning('最新的推荐数据保存在Github上,请考虑使用代理或者等待下一版本内置数据更新.')
+      })
+    },
+    async playEvent (e) {
+      const db = await history.find({ site: e.key, ids: e.ids })
+      if (db) {
+        this.video = { key: e.key, info: { id: db.ids, name: db.name, index: db.index }, detail: db.detail }
+      } else {
+        this.video = { key: e.key, info: { id: e.ids, name: e.name, index: 0 }, detail: e.detail }
+      }
+      this.view = 'Play'
+    },
+    deleteEvent (e) {
+      recommendation.remove(e.id).then(res => {
+        if (res) {
+          this.$message.warning('删除失败')
+        }
+        this.getRecommendations()
+      })
+    },
+    shareEvent (e) {
+      this.share = {
+        show: true,
+        key: e.key,
+        info: e.detail
+      }
+    },
+    async downloadEvent (e) {
+      const db = await history.find({ site: e.key, ids: e.ids })
+      let videoFlag
+      if (db) videoFlag = db.videoFlag
+      zy.download(e.key, e.ids, videoFlag).then(res => {
+        clipboard.writeText(res.downloadUrls)
+        this.$message.success(res.info)
+      }).catch((err) => {
+        this.$message.error(err.info)
+      })
+    },
+    getRecommendations () {
+      recommendation.all().then(res => {
+        this.recommendations = res.sort(function (a, b) {
+          return b.id - a.id
+        })
+        this.getFilterData()
+      })
+    },
+    getFilterData () {
+      this.types = [...new Set(this.recommendations.map(ele => ele.detail.type))].filter(x => x)
+      this.areas = [...new Set(this.recommendations.map(ele => ele.detail.area))].filter(x => x)
+    },
+    updateViewMode () {
+      setTimeout(() => { if (this.$refs.recommendationsWaterfall) this.$refs.recommendationsWaterfall.refresh() }, 700)
+      setting.find().then(res => {
+        res.recommendationViewMode = this.setting.recommendationViewMode
+        setting.update(res)
+      })
+    }
+  },
+  created () {
+    this.getRecommendations()
+  },
+  mounted () {
+    addEventListener('resize', () => {
+      setTimeout(() => { if (this.$refs.recommendationsWaterfall) this.$refs.recommendationsWaterfall.resize() }, 500)
+    })
+  }
+}
+</script>

src/components/Setting.vue

@@ -5,22 +5,10 @@
       <div class="info">
         <a @click="linkOpen('http://zyplayer.fun/')">官网</a>
         <a @click="linkOpen('https://github.com/Hunlongyu/ZY-Player')">Github</a>
-        <a @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/issues')">当前版本v{{pkg.version}} 反馈</a>
-        <a style="color:#38dd77" @click="quitAndInstall()" v-show="latestVersion !== pkg.version" >最新版本v{{latestVersion}}</a>
-      </div>
-      <div class="view">
-        <div class="title">视图</div>
-        <div class="view-box">
-          <div class="zy-select" @mouseleave="show.view = false">
-            <div class="vs-placeholder" @click="show.view = true">默认视图</div>
-            <div class="vs-options" v-show="show.view">
-              <ul class="zy-scroll">
-                <li :class="d.view === 'picture' ? 'active' : ''" @click="changeView('picture')">海报</li>
-                <li :class="d.view === 'table' ? 'active' : ''" @click="changeView('table')">列表</li>
-              </ul>
-            </div>
-          </div>
-        </div>
+        <a @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/releases/tag/v' + pkg.version)">v{{pkg.version}}更新日志</a>
+        <a @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/issues/80')">常见问题</a>
+        <a @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/issues')">反馈建议</a>
+        <a style="color:#38dd77" @click="openUpdate()" v-show="update.find" >最新版本v{{update.version}}</a>
       </div>
       <div class="shortcut">
         <div class="title">快捷键</div>
@@ -40,6 +28,9 @@
           <div class="zy-select">
             <div class="vs-placeholder vs-noAfter" @click="impShortcut">导入</div>
           </div>
+          <div class="zy-select">
+            <div class="vs-placeholder vs-noAfter" @click="resetShortcut">重置</div>
+          </div>
         </div>
       </div>
       <div class="shortcut">
@@ -210,13 +201,26 @@
         </span>
       </el-dialog>
     </div>
+    <div class="update" v-if="update.show">
+      <div class="wrapper">
+        <div class="body">
+          <div class="content" v-html="update.html"></div>
+        </div>
+        <div class="footer">
+          <el-button size="small" @click="closeUpdate">关闭</el-button>
+          <el-button size="small" v-show="update.showDownload" @click="startUpdate">更新</el-button>
+          <el-button size="small" v-show="!update.showDownload && !update.downloaded">正在更新...</el-button>
+          <el-button size="small" v-show="update.downloaded" @click="installUpdate">安装</el-button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
 import { mapMutations } from 'vuex'
 import pkg from '../../package.json'
 import { setting, sites, shortcut } from '../lib/dexie'
-import { sites as defaultSites } from '../lib/dexie/initData'
+import { sites as defaultSites, localKey as defaultShortcuts } from '../lib/dexie/initData'
 import { shell, clipboard, remote, ipcRenderer } from 'electron'
 import db from '../lib/dexie/dexie'
 import zy from '../lib/site/tools'
@@ -245,6 +249,14 @@ export default {
         scheme: '',
         url: '',
         port: ''
+      },
+      update: {
+        find: false,
+        version: '',
+        show: false,
+        html: '',
+        downloaded: false,
+        showDownload: true
       }
     }
   },
@@ -290,11 +302,6 @@ export default {
         this.shortcutList = res
       })
     },
-    changeView (e) {
-      this.d.view = e
-      this.updateSettingEvent()
-      this.show.view = false
-    },
     async clearCache () {
       const win = remote.getCurrentWindow()
       const ses = win.webContents.session
@@ -416,10 +423,20 @@ export default {
         this.$message.info('已清空原数据')
         shortcut.add(json).then(e => {
           this.$message.success('已添加成功')
-          this.getSites()
+          this.getShortcut()
+          this.d.shortcutModified = true
+          this.updateSettingEvent()
         })
       })
     },
+    resetShortcut () {
+      shortcut.clear().then(shortcut.add(defaultShortcuts)).then(res => {
+        this.getShortcut()
+        this.$message.success('快捷键已重置')
+        this.d.shortcutModified = true
+        this.updateSettingEvent()
+      })
+    },
     async changeProxyType (e) {
       this.d.proxy.type = e
       if (e === 'manual') {
@@ -466,20 +483,28 @@ export default {
         return false
       }
     },
-    getLatestVersion () {
+    checkUpdate () {
       ipcRenderer.send('checkForUpdate')
       ipcRenderer.on('update-available', (e, info) => {
-        this.latestVersion = info.version
-      })
-      ipcRenderer.on('update-error', () => {
-        this.$message.warning = '更新出错.'
-      })
-      ipcRenderer.on('update-downloaded', () => {
-        this.$message.info = '下载完毕, 退出安装'
+        this.update.find = true
+        this.update.version = info.version
+        this.update.html = info.releaseNotes
       })
     },
-    quitAndInstall () {
-      this.$message.success('已开始下载更新，下载完毕后，将自动退出安装。')
+    openUpdate () {
+      this.update.show = true
+    },
+    closeUpdate () {
+      this.update.show = false
+    },
+    startUpdate () {
+      this.update.showDownload = false
+      ipcRenderer.send('downloadUpdate')
+      ipcRenderer.on('update-downloaded', () => {
+        this.update.downloaded = true
+      })
+    },
+    installUpdate () {
       ipcRenderer.send('quitAndInstall')
     },
     createContextMenu () {
@@ -498,7 +523,7 @@ export default {
     this.getSites()
     this.getSetting()
     this.getShortcut()
-    this.getLatestVersion()
+    this.checkUpdate()
     this.createContextMenu()
   }
 }
@@ -536,17 +561,6 @@ export default {
       cursor: pointer;
     }
   }
-  .view{
-    width: 100%;
-    padding: 20px;
-    margin-top: 20px;
-    .view-box{
-      margin-top: 10px;
-      .zy-select{
-        margin-right: 20px;
-      }
-    }
-  }
   .site{
     width: 100%;
     padding: 20px;
@@ -641,5 +655,28 @@ export default {
     font-size: 12px;
     color: #ff000066;
   }
+  .update{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(7, 17, 27, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .wrapper{
+      background-color: #fff;
+      padding: 20px 50px 40px;
+      border-radius: 4px;
+      max-width: 500px;
+      max-height: 90%;
+      overflow: auto;
+      .footer{
+        display: flex;
+        justify-content: flex-end;
+      }
+    }
+  }
 }
 </style>

src/components/Share.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="share" id="share" @click="shareClickEvent" v-on-clickaway="shareClickEvent">
+  <div class="share" id="share" @click="shareClickEvent" v-clickoutside="shareClickEvent">
     <div class="left">
       <img :src="pic" alt="" @load="picLoadEvent">
     </div>
     <div class="right" id="right">
       <div class="title">{{ share.info.name }}</div>
-      <qrcode-vue id="qr" :value="link" :size="160" level="L" />
+      <qrcode-vue v-if="link !== ''" id="qr" :value="link" :size="160" level="L" />
       <div class="tips">
         <p>长按二维码，识别播放。</p>
         <p><img src="@/assets/image/logo.png"></p>
@@ -22,7 +22,7 @@ import { mapMutations } from 'vuex'
 import QrcodeVue from 'qrcode.vue'
 import html2canvas from 'html2canvas'
 import zy from '../lib/site/tools'
-import { directive as onClickaway } from 'vue-clickaway'
+import Clickoutside from 'element-ui/src/utils/clickoutside'
 const { clipboard, nativeImage } = require('electron')
 export default {
   name: 'share',
@@ -45,6 +45,14 @@ export default {
       set (val) {
         this.SET_SHARE(val)
       }
+    },
+    DetailCache: {
+      get () {
+        return this.$store.getters.getDetailCache
+      },
+      set (val) {
+        this.SET_DetailCache(val)
+      }
     }
   },
   watch: {
@@ -58,32 +66,43 @@ export default {
     }
   },
   directives: {
-    onClickaway: onClickaway
+    Clickoutside
   },
   methods: {
-    ...mapMutations(['SET_SHARE']),
+    ...mapMutations(['SET_SHARE', 'SET_DetailCache']),
     shareClickEvent () {
       this.share = {
         show: false,
         info: {}
       }
     },
-    getDetail () {
-      this.loading = true
-      const id = this.share.info.ids || this.share.info.id
-      zy.detail(this.share.key, id).then(res => {
-        if (res) {
-          this.pic = res.pic
-          var m3u8List = res.m3u8List
-          const url = m3u8List[1]
-          this.link = 'http://hunlongyu.gitee.io/zy-player-web?url=' + url + '&name=' + this.share.info.name
+    async getUrl (dl) {
+      const t = dl.dd._t
+      if (t) {
+        return t.split('#')[0].split('$')[1]
+      } else {
+        const id = this.share.info.ids || this.share.info.id
+        const cacheKey = this.share.key + '@' + id
+        let res = this.DetailCache[cacheKey]
+        if (!this.DetailCache[cacheKey]) {
+          res = await zy.detail(this.share.key, id)
+          this.DetailCache[cacheKey] = res
         }
-        this.loading = false
-      })
+        if (res) {
+          return res.fullList[0].list[0]
+        }
+      }
+    },
+    async getDetail () {
+      this.loading = true
+      this.pic = this.share.info.pic
+      const url = await this.getUrl(this.share.info.dl)
+      this.link = 'http://hunlongyu.gitee.io/zy-player-web?url=' + url + '&name=' + this.share.info.name
+      this.loading = false
     },
     picLoadEvent () {
       const dom = document.getElementById('share')
-      html2canvas(dom, { useCORS: true, allowTaint: true }).then(res => {
+      html2canvas(dom).then(res => {
         const png = res.toDataURL('image/png')
         const p = nativeImage.createFromDataURL(png)
         clipboard.writeImage(p)

src/components/Star.vue

@@ -1,20 +1,25 @@
 <template>
   <div class="listpage" id="star">
     <div class="listpage-header" id="star-header">
-        <el-switch v-model="viewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="table" @change="updateViewMode"></el-switch>
-        <el-button @click.stop="exportFavoritesEvent" icon="el-icon-upload2">导出</el-button>
-        <el-button @click.stop="importFavoritesEvent" icon="el-icon-download">导入</el-button>
-        <el-button @click.stop="clearFavoritesEvent" icon="el-icon-delete-solid">清空</el-button>
+        <el-switch v-model="setting.starViewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="table" @change="updateViewMode"></el-switch>
+        <el-button @click.stop="exportFavoritesEvent" icon="el-icon-upload2" title="导出全部，自动添加扩展名">导出</el-button>
+        <el-button @click.stop="importFavoritesEvent" icon="el-icon-download" title="支持同时导入多个文件">导入</el-button>
+        <el-button @click.stop="removeSelectedItems" icon="el-icon-delete-solid">{{ multipleSelection.length === 0 ? "清空" : "删除所选" }}</el-button>
         <el-button @click.stop="updateAllEvent" icon="el-icon-refresh">同步所有收藏</el-button>
     </div>
     <div class="listpage-body" id="star-body">
-      <div class="show-table" id="star-table"  v-show="viewMode === 'table'">
+      <div class="show-table" id="star-table"  v-if="setting.starViewMode === 'table'">
         <el-table size="mini" fit height="100%" row-key="id"
-        ref="starTable"
-        :data="list"
-        :cell-class-name="checkUpdate"
-        @row-click="detailEvent"
-        @sort-change="handleSortChange">
+          ref="starTable"
+          :data="list"
+          :cell-class-name="checkUpdate"
+          @row-click="detailEvent"
+          @sort-change="handleSortChange"
+          @select="selectionCellClick"
+          @selection-change="handleSelectionChange">
+          <el-table-column
+            type="selection">
+          </el-table-column>
           <el-table-column
             sortable
             :sort-method="(a , b) => sortByLocaleCompare(a.name, b.name)"
@@ -78,7 +83,7 @@
           </el-table-column>
         </el-table>
       </div>
-      <div class="show-picture" id="star-picture" v-show="viewMode === 'picture'">
+      <div class="show-picture" id="star-picture" v-if="setting.starViewMode === 'picture'">
         <Waterfall ref="starWaterfall" :list="list" :gutter="20" :width="240"
           :breakpoints="{
             1200: { //当屏幕宽度小于等于1200
@@ -102,7 +107,7 @@
                   <div class="update" v-if="props.data.hasUpdate">
                     <span>有更新</span>
                   </div>
-                  <div class="progress" v-if="props.data.index && props.data.detail && props.data.detail.m3u8List !== undefined && props.data.detail.m3u8List.length > 1">
+                  <div class="progress" v-if="props.data.index && props.data.detail && props.data.detail.fullList[0].list !== undefined && props.data.detail.fullList[0].list.length > 1">
                   <span>
                     看至第{{ props.data.index + 1 }}集
                   </span>
@@ -133,7 +138,7 @@
 </template>
 <script>
 import { mapMutations } from 'vuex'
-import { star, sites, setting } from '../lib/dexie'
+import { history, star, sites, setting } from '../lib/dexie'
 import zy from '../lib/site/tools'
 import { remote } from 'electron'
 import fs from 'fs'
@@ -146,8 +151,11 @@ export default {
     return {
       list: [],
       sites: [],
-      viewMode: 'picture',
-      numNoUpdate: 0
+      numNoUpdate: 0,
+      shiftDown: false,
+      selectionBegin: '',
+      selectionEnd: '',
+      multipleSelection: []
     }
   },
   components: {
@@ -185,6 +193,14 @@ export default {
       set (val) {
         this.SET_SHARE(val)
       }
+    },
+    setting: {
+      get () {
+        return this.$store.getters.getSetting
+      },
+      set (val) {
+        this.SET_SETTING(val)
+      }
     }
   },
   watch: {
@@ -192,9 +208,7 @@ export default {
       if (this.view === 'Star') {
         this.getAllsites()
         this.getFavorites()
-        if (this.$refs.starWaterfall) {
-          this.$refs.starWaterfall.refresh()
-        }
+        if (this.setting.starViewMode === 'table') this.showShiftPrompt()
       }
     },
     numNoUpdate () {
@@ -206,13 +220,40 @@ export default {
     }
   },
   methods: {
-    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
+    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE', 'SET_SETTING']),
     handleSortChange (column, prop, order) {
       this.updateDatabase()
     },
     sortByLocaleCompare (a, b) {
       return a.localeCompare(b, 'zh')
     },
+    selectionCellClick (selection, row) { // 同history一样，逆序
+      if (this.shiftDown && this.selectionBegin !== '' && selection.includes(row)) {
+        this.selectionEnd = row.id
+        const start = this.list.findIndex(e => e.id === Math.max(this.selectionBegin, this.selectionEnd))
+        const end = this.list.findIndex(e => e.id === Math.min(this.selectionBegin, this.selectionEnd))
+        const selections = this.list.slice(start, end + 1)
+        this.$nextTick(() => {
+          selections.forEach(e => this.$refs.starTable.toggleRowSelection(e, true))
+        })
+        this.selectionBegin = this.selectionEnd = ''
+        return
+      }
+      if (selection.includes(row)) {
+        this.selectionBegin = row.id
+      } else {
+        this.selectionBegin = ''
+      }
+    },
+    handleSelectionChange (rows) {
+      this.multipleSelection = rows
+    },
+    removeSelectedItems () {
+      if (!this.multipleSelection.length) this.multipleSelection = this.list
+      this.multipleSelection.forEach(e => star.remove(e.id))
+      this.getFavorites()
+      this.updateDatabase()
+    },
     detailEvent (e) {
       this.detail = {
         show: true,
@@ -249,7 +290,7 @@ export default {
       this.share = {
         show: true,
         key: e.key,
-        info: e
+        info: e.detail
       }
     },
     checkUpdate ({ row, rowIndex }) {
@@ -298,31 +339,15 @@ export default {
         this.updateEvent(e)
       })
     },
-    downloadEvent (e) {
-      const key = e.key
-      const id = e.id
-      zy.download(key, id).then(res => {
-        if (res && res.m3u8List) {
-          const list = res.m3u8List.split('#')
-          let downloadUrl = ''
-          for (const i of list) {
-            const url = encodeURI(i.split('$')[1])
-            downloadUrl += (url + '\n')
-          }
-          clipboard.writeText(downloadUrl)
-          this.$message.success('『MP4』格式的链接已复制, 快去下载吧!')
-        } else {
-          zy.detail(key, id).then(res => {
-            const list = [...res.m3u8List]
-            let downloadUrl = ''
-            for (const i of list) {
-              const url = encodeURI(i.split('$')[1])
-              downloadUrl += (url + '\n')
-            }
-            clipboard.writeText(downloadUrl)
-            this.$message.success('『M3U8』格式的链接已复制, 快去下载吧!')
-          })
-        }
+    async downloadEvent (e) {
+      const db = await history.find({ site: e.key, ids: e.ids })
+      let videoFlag
+      if (db) videoFlag = db.videoFlag
+      zy.download(e.key, e.ids, videoFlag).then(res => {
+        clipboard.writeText(res.downloadUrls)
+        this.$message.success(res.info)
+      }).catch((err) => {
+        this.$message.error(err.info)
       })
     },
     getSiteName (row) {
@@ -359,13 +384,12 @@ export default {
       const str = JSON.stringify(arr, null, 2)
       const options = {
         filters: [
-          { name: 'JSON file', extensions: ['json'] },
-          { name: 'Normal text file', extensions: ['txt'] },
-          { name: 'All types', extensions: ['*'] }
+          { name: 'JSON file', extensions: ['json'] }
         ]
       }
       remote.dialog.showSaveDialog(options).then(result => {
         if (!result.canceled) {
+          if (!result.filePath.endsWith('.json')) result.filePath += '.json'
           fs.writeFileSync(result.filePath, str)
           this.$message.success('导出收藏成功')
         }
@@ -376,9 +400,7 @@ export default {
     importFavoritesEvent () {
       const options = {
         filters: [
-          { name: 'JSON file', extensions: ['json'] },
-          { name: 'Normal text file', extensions: ['txt'] },
-          { name: 'All types', extensions: ['*'] }
+          { name: 'JSON file', extensions: ['json'] }
         ],
         properties: ['openFile', 'multiSelections']
       }
@@ -392,6 +414,16 @@ export default {
             json.reverse().forEach(ele => {
               const starExists = starList.some(x => x.key === ele.key && x.ids === ele.ids)
               if (!starExists) {
+                const newDetail = {
+                  director: ele.director,
+                  actor: ele.actor,
+                  type: ele.type,
+                  area: ele.area,
+                  lang: ele.lang,
+                  year: ele.year,
+                  last: ele.last,
+                  note: ele.note
+                }
                 var doc = {
                   id: id,
                   key: ele.key,
@@ -401,16 +433,7 @@ export default {
                   hasUpdate: ele.hasUpdate,
                   index: ele.index,
                   rate: ele.rate,
-                  detail: ele.detail === undefined ? {
-                    director: ele.director,
-                    actor: ele.actor,
-                    type: ele.type,
-                    area: ele.area,
-                    lang: ele.lang,
-                    year: ele.year,
-                    last: ele.last,
-                    note: ele.note
-                  } : ele.detail
+                  detail: ele.detail === undefined ? newDetail : ele.detail
                 }
                 id += 1
                 starList.push(doc)
@@ -426,11 +449,6 @@ export default {
         this.$message.error(err)
       })
     },
-    clearFavoritesEvent () {
-      star.clear().then(e => {
-        this.getFavorites()
-      })
-    },
     syncTableData () {
       if (this.$refs.starTable.tableData && this.$refs.starTable.tableData.length === this.list.length) {
         this.list = this.$refs.starTable.tableData
@@ -448,6 +466,7 @@ export default {
       })
     },
     rowDrop () {
+      if (!document.getElementById('star-table')) return
       const tbody = document.getElementById('star-table').querySelector('.el-table__body-wrapper tbody')
       const _this = this
       Sortable.create(tbody, {
@@ -458,33 +477,40 @@ export default {
         }
       })
     },
-    getViewMode () {
-      setting.find().then(res => {
-        this.viewMode = res.starViewMode
-      })
-    },
     updateViewMode () {
+      if (this.setting.starViewMode === 'table') {
+        setTimeout(() => { this.rowDrop() }, 100)
+        this.showShiftPrompt()
+      } else {
+        setTimeout(() => { if (this.$refs.starWaterfall) this.$refs.starWaterfall.refresh() }, 700)
+      }
       setting.find().then(res => {
-        res.starViewMode = this.viewMode
+        res.starViewMode = this.setting.starViewMode
         setting.update(res)
       })
+    },
+    showShiftPrompt () {
+      if (this.setting.shiftTooltipLimitTimes === undefined) this.setting.shiftTooltipLimitTimes = 5
+      if (this.setting.shiftTooltipLimitTimes) {
+        this.$message.info('多选时支持shift快捷键')
+        this.setting.shiftTooltipLimitTimes--
+        setting.find().then(res => {
+          res.shiftTooltipLimitTimes = this.setting.shiftTooltipLimitTimes
+          setting.update(res)
+        })
+      }
     }
   },
   created () {
     this.getFavorites()
-    this.getViewMode()
   },
   mounted () {
-    this.rowDrop()
-    window.addEventListener('resize', () => {
-      if (this.$refs.starWaterfall && this.view === 'Star') {
-        this.$refs.starWaterfall.resize()
-        this.$refs.starWaterfall.refresh()
-        setTimeout(() => {
-          this.$refs.starWaterfall.refresh()
-        }, 500)
-      }
-    }, false)
+    if (this.setting.starViewMode === 'table') setTimeout(() => { this.rowDrop() }, 100)
+    addEventListener('keydown', code => { if (code.keyCode === 16) this.shiftDown = true })
+    addEventListener('keyup', code => { if (code.keyCode === 16) this.shiftDown = false })
+    addEventListener('resize', () => {
+      setTimeout(() => { if (this.$refs.starWaterfall) this.$refs.starWaterfall.resize() }, 500)
+    })
   }
 }
 </script>

src/lib/dexie/dexie.js

@@ -16,6 +16,38 @@ db.version(4).stores({
   channelList: '++id, name, prefer, channels, group, isActive'
 })
 
+// 开发和稳定版同一版本号会有不同的数据库
+// 参考https://github.com/dfahlander/Dexie.js/releases/tag/v3.0.0-alpha.3  upgrade可以改变主键和表名了
+// https://dexie.org/docs/Version/Version.stores()
+// https://dexie.org/docs/Version/Version.upgrade()
+// https://ahuigo.github.io/b/ria/js-indexedDB#/  比较旧，适当参考
+db.version(5).stores({
+  shortcut: null
+})
+
+db.version(6).stores({
+  shortcut: '++id, name, key, desc'
+}).upgrade(async tx => {
+  await tx.shortcut.bulkAdd(localKey)
+})
+
+db.version(7).stores({
+  sites: '++id, key, name, api, download, jiexiUrl, isActive, group',
+  history: '++id, [site+ids], name, type, year, index, time, duration, detail, onlinePlay'
+}).upgrade(trans => {
+  trans.sites.toCollection().modify(site => {
+    site.jiexiUrl = ''
+  })
+  trans.history.toCollection().modify(record => {
+    record.detail.fullList = [].concat(record.detail.m3u8List)
+    delete record.detail.m3u8List
+  })
+  trans.star.toCollection().modify(favorite => {
+    favorite.detail.fullList = [].concat(favorite.detail.m3u8List)
+    delete favorite.detail.m3u8List
+  })
+})
+
 db.on('populate', () => {
   db.setting.bulkAdd(setting)
   db.sites.bulkAdd(sites)

src/lib/dexie/iniData/Sites.json

@@ -5,9 +5,9 @@
     "name": "麻花资源",
     "api": "http://www.mhapi123.com/inc/ldg_api.php",
     "download": "",
+    "jiexiUrl": "",
     "group": "默认",
-    "isActive": true,
-    "status": "可用"
+    "isActive": true
   },
   {
     "id": 2,
@@ -15,9 +15,9 @@
     "name": "1886 资源",
     "api": "http://cj.1886zy.co/inc/api.php",
     "download": "",
+    "jiexiUrl": "",
     "group": "默认",
-    "isActive": true,
-    "status": "可用"
+    "isActive": true
   },
   {
     "id": 3,
@@ -25,138 +25,158 @@
     "name": "123 资源",
     "api": "http://cj.123ku2.com:12315/inc/api.php",
     "download": "",
+    "jiexiUrl": "",
     "group": "默认",
-    "isActive": true,
-    "status": "可用"
+    "isActive": true
   },
   {
+    "key": "7K资源",
     "id": 4,
+    "name": "7K资源",
+    "api": "https://zy.7kjx.com/cjapi.php",
+    "download": "",
+    "jiexiUrl": "https://jx.7kjx.com/?url=",
+    "group": "默认",
+    "isActive": true
+  },
+  {
+    "key": "1717云资源网",
+    "id": 5,
+    "name": "1717云资源网",
+    "api": "http://zy.itono.cn/inc/api.php",
+    "download": "",
+    "jiexiUrl": "https://www.1717yun.com/jiexi/?url=",
+    "group": "默认",
+    "isActive": true
+  },
+  {
+    "id": 6,
     "key": "subo988",
     "name": "速播资源站",
     "api": "https://www.subo988.com/inc/api.php",
     "download": "",
+    "jiexiUrl": "",
     "group": "默认",
-    "isActive": true,
-    "status": "可用"
+    "isActive": true
   },
   {
-    "id": 5,
+    "id": 7,
     "key": "88zyw",
     "name": "88 影视资源站",
     "api": "http://www.88zyw.net/inc/api.php",
     "download": "",
+    "jiexiUrl": "",
     "group": "默认",
-    "isActive": true,
-    "status": "可用"
+    "isActive": true
   },
   {
     "key": "zuidazy",
-    "id": 6,
+    "id": 8,
     "name": "最大资源网",
     "api": "http://www.zdziyuan.com/inc/ldg_sea.php",
     "download": "http://www.zdziyuan.com/inc/apidown.php",
+    "jiexiUrl": "",
     "group": "默认",
-    "isActive": true,
-    "status": "可用"
+    "isActive": true
   },
   {
     "key": "mbo",
-    "id": 7,
+    "id": 9,
     "name": "秒播资源",
     "api": "http://caiji.mb77.vip/inc/seacmsapi.php",
     "download": "",
+    "jiexiUrl": "",
     "group": "默认",
-    "isActive": true,
-    "status": "可用"
+    "isActive": true
   },
   {
-    "id": 8,
+    "id": 10,
     "key": "apibdzy",
     "name": "百度云资源",
     "api": "https://api.apibdzy.com/api.php/provide/vod/at/xml",
     "download": "",
+    "jiexiUrl": "",
     "group": "默认",
-    "isActive": true,
-    "status": "可用"
+    "isActive": true
   },
   {
-    "id": 9,
+    "id": 11,
     "key": "okzy",
     "name": "OK 资源网",
     "api": "http://cj.okzy.tv/inc/api.php",
     "download": "http://cj.okzy.tv/inc/apidown.php",
+    "jiexiUrl": "",
     "group": "默认",
-    "isActive": true,
-    "status": "可用"
+    "isActive": true
   },
   {
-    "id": 10,
+    "id": 12,
     "key": "kuyunzy",
     "name": "酷云资源",
     "api": "http://caiji.kuyun98.com/inc/ldg_api.php",
     "download": "http://caiji.kuyun98.com/inc/apidown.php",
+    "jiexiUrl": "",
     "group": "默认",
-    "isActive": true,
-    "status": "可用"
+    "isActive": true
   },
   {
-    "id": 11,
+    "id": 13,
     "key": "kubozy",
     "name": "酷播资源",
     "api": "http://api.kbzyapi.com/inc/api.php",
     "download": "",
+    "jiexiUrl": "",
     "group": "默认",
-    "isActive": true,
-    "status": "可用"
+    "isActive": true
   },
   {
-    "id": 12,
+    "id": 14,
     "key": "yongjiuzy",
     "name": "永久资源",
     "api": "http://cj.yongjiuzyw.com/inc/api.php",
     "download": "",
+    "jiexiUrl": "",
     "group": "默认",
-    "isActive": true,
-    "status": "可用"
+    "isActive": true
   },
   {
-    "id": 13,
+    "id": 15,
     "key": "rrzy",
     "name": "人人资源",
     "api": "https://www.rrzyw.cc/api.php/provide/vod/from/rrm3u8/at/xml/",
     "download": "",
+    "jiexiUrl": "",
     "group": "默认",
-    "isActive": true,
-    "status": "可用"
+    "isActive": true
   },
   {
-    "id": 14,
+    "id": 16,
     "key": "bbkdj",
     "name": "步步高顶尖资源网",
     "api": "http://api.bbkdj.com/api",
     "download": "",
+    "jiexiUrl": "",
     "group": "默认",
-    "isActive": true,
-    "status": "可用"
+    "isActive": true
   },
   {
-    "id": 15,
+    "id": 17,
     "key": "zuixinzy",
     "name": "最新资源",
     "api": "http://api.zuixinapi.com/inc/api.php",
     "download": "",
+    "jiexiUrl": "",
     "group": "默认",
-    "isActive": true,
-    "status": "可用"
+    "isActive": true
   },
   {
-    "id": 16,
+    "id": 18,
     "key": "209zy",
     "name": "209 资源",
     "api": "http://cj.1156zy.com/inc/api.php",
     "download": "",
+    "jiexiUrl": "",
     "group": "默认",
-    "isActive": true,
-    "status": "可用"
+    "isActive": true
   }
-]
+]

src/lib/element/index.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { Message, Button, Table, TableColumn, Tag, Input, InputNumber, Dialog, Form, FormItem, Switch, Select, Option, Checkbox, Autocomplete, Col, Tree, Divider } from 'element-ui'
+import { Message, Button, Table, TableColumn, Tag, Input, InputNumber, Dialog, Form, FormItem, Switch, Select, Option, Checkbox, Autocomplete, Col, Tree, Divider, Progress } from 'element-ui'
 import Plugin from 'v-fit-columns'
 Vue.use(Button)
 Vue.use(Col)
@@ -19,4 +19,5 @@ Vue.use(Checkbox)
 Vue.use(Autocomplete)
 Vue.use(Tree)
 Vue.use(Divider)
+Vue.use(Progress)
 Vue.prototype.$message = Message

src/lib/site/server.js

@@ -1,18 +0,0 @@
-import express from 'express'
-import cors from 'cors'
-const Axios = require('axios')
-
-const app = express()
-app.use(cors())
-app.use(express.json())
-app.use(express.urlencoded({ extended: true }))
-
-app.post('/api', async (req, res) => {
-  const result = await Axios.get(req.body.url)
-  res.json({
-    code: 1,
-    info: result.data
-  })
-})
-
-app.listen(44444)

src/lib/site/tools.js

@@ -15,7 +15,8 @@ var session = win.webContents.session
 var ElectronProxyAgent = require('electron-proxy-agent')
 
 // 请求超时时限
-axios.defaults.timeout = 10000 // 可能使用代理，增长超时
+// axios.defaults.timeout = 10000 // 可能使用代理，增长超时
+const TIMEOUT = 6000
 
 // 重试次数，共请求3次
 axios.defaults.retry = 2
@@ -23,11 +24,20 @@ axios.defaults.retry = 2
 // 请求的间隙
 axios.defaults.retryDelay = 1000
 
+// 使用请求拦截器动态调整超时
+axios.interceptors.request.use(function (config) {
+  if (config.__retryCount === undefined) {
+    config.timeout = TIMEOUT
+  } else {
+    config.timeout = TIMEOUT * (config.__retryCount + 1)
+  }
+  return config
+}, function (err) {
+  return Promise.reject(err)
+})
+
 // 添加响应拦截器
 axios.interceptors.response.use(function (response) {
-  // 对响应数据做些事
-  if (response.status && response.status === 200 && response.request.responseURL.includes('api.php') && !response.data.startsWith('<?xml')) {
-  }
   return response
 }, function (err) { // 请求错误时做些事
   // 请求超时的之后，抛出 err.code = ECONNABORTED的错误..错误信息是 timeout of  xxx ms exceeded
@@ -139,7 +149,11 @@ const zy = {
           const json = parser.parse(data, this.xmlConfig)
           const jsondata = json.rss === undefined ? json : json.rss
           const videoList = jsondata.list.video
-          resolve(videoList)
+          if (videoList && videoList.length) {
+            resolve(videoList)
+          } else {
+            resolve([])
+          }
         }).catch(err => {
           reject(err)
         })
@@ -163,7 +177,7 @@ const zy = {
           url = `${site.api}?ac=videolist`
         }
         axios.post(url).then(async res => {
-          const data = res.data
+          const data = res.data.match(/<list [^>]*>/)[0] + '</list>' // 某些源站不含页码时获取到的数据parser无法解析
           const json = parser.parse(data, this.xmlConfig)
           const jsondata = json.rss === undefined ? json : json.rss
           const pg = {
@@ -222,21 +236,46 @@ const zy = {
           const json = parser.parse(data, this.xmlConfig)
           const jsondata = json.rss === undefined ? json : json.rss
           const videoList = jsondata.list.video
-          // Parse m3u8List
-          var m3u8List = []
+          // Parse video lists
+          var fullList = []
+          let index = 0
+          const supportedFormats = ['m3u8', 'mp4']
           const dd = videoList.dl.dd
           const type = Object.prototype.toString.call(dd)
           if (type === '[object Array]') {
             for (const i of dd) {
-              // 如果含有多个视频列表的话, 仅获取m3u8列表
-              if (i._flag.includes('m3u8')) {
-                m3u8List = i._t.split('#')
+              const ext = Array.from(new Set(...i._t.split('#').map(e => e.split('$')[1].match(/\.\w+?$/)))).map(e => e.slice(1))
+              if (ext.length && ext.length <= supportedFormats.length && ext.every(e => supportedFormats.includes(e))) {
+                if (ext.length === 1) {
+                  i._flag = ext[0]
+                } else {
+                  i._flag = index ? 'ZY支持-' + index : 'ZY支持'
+                  index++
+                }
               }
+              fullList.push(
+                {
+                  flag: i._flag,
+                  list: i._t.split('#').filter(e => e && e.split('$')[1] && e.split('$')[1].startsWith('http'))
+                }
+              )
             }
           } else {
-            m3u8List = dd._t.split('#')
+            fullList.push(
+              {
+                flag: dd._flag,
+                list: dd._t.split('#').filter(e => e && e.split('$')[1] && e.split('$')[1].startsWith('http'))
+              }
+            )
           }
-          videoList.m3u8List = m3u8List
+          if (fullList.length > 1) { // 将ZY支持的播放列表前置
+            index = fullList.findIndex(e => supportedFormats.includes(e.flag) || e.flag.startsWith('ZY支持'))
+            if (index !== -1) {
+              const first = fullList.splice(index, 1)
+              fullList = first.concat(fullList)
+            }
+          }
+          videoList.fullList = fullList
           resolve(videoList)
         }).catch(err => {
           reject(err)
@@ -252,8 +291,10 @@ const zy = {
    * @param {*} id 资源唯一标识符 id
    * @returns
    */
-  download (key, id) {
+  download (key, id, videoFlag) {
     return new Promise((resolve, reject) => {
+      let info = ''
+      let downloadUrls = ''
       this.getSite(key).then(res => {
         const site = res
         if (site.download) {
@@ -263,24 +304,42 @@ const zy = {
             const json = parser.parse(data, this.xmlConfig)
             const jsondata = json.rss === undefined ? json : json.rss
             const videoList = jsondata.list.video
-            // Parse m3u8List
-            var m3u8List = []
             const dd = videoList.dl.dd
             const type = Object.prototype.toString.call(dd)
             if (type === '[object Array]') {
               for (const i of dd) {
-                m3u8List = i._t.split('#')
+                downloadUrls = i._t.split('#').map(e => encodeURI(e.split('$')[1])).join('\n')
               }
             } else {
-              m3u8List = dd._t.split('#')
+              downloadUrls = dd._t.split('#').map(e => encodeURI(e.split('$')[1])).join('\n')
             }
-            videoList.m3u8List = m3u8List
-            resolve(videoList)
-          }).catch(err => {
+            if (downloadUrls) {
+              info = '调用下载接口获取到的链接已复制, 快去下载吧!'
+              resolve({ downloadUrls: downloadUrls, info: info })
+            } else {
+              throw new Error()
+            }
+          }).catch((err) => {
+            err.info = '无法获取到下载链接，请通过播放页面点击“调试”按钮获取'
             reject(err)
           })
         } else {
-          resolve([])
+          zy.detail(key, id).then(res => {
+            const dl = res.fullList.find(e => e.flag === videoFlag) || res.fullList[0]
+            for (const i of dl.list) {
+              const url = encodeURI(i.split('$')[1])
+              downloadUrls += (url + '\n')
+            }
+            if (downloadUrls) {
+              info = '视频源链接已复制, 快去下载吧!'
+              resolve({ downloadUrls: downloadUrls, info: info })
+            } else {
+              throw new Error()
+            }
+          }).catch((err) => {
+            err.info = '无法获取到下载链接，请通过播放页面点击“调试”按钮获取'
+            reject(err)
+          })
         }
       })
     })
@@ -328,28 +387,26 @@ const zy = {
   /**
    * 获取豆瓣页面链接
    * @param {*} name 视频名称
+   * @param {*} year 视频年份
    * @returns 豆瓣页面链接，如果没有搜到该视频，返回搜索页面链接
    */
-  doubanLink (name) {
+  doubanLink (name, year) {
     return new Promise((resolve, reject) => {
       // 豆瓣搜索链接
       var nameToSearch = name.replace(/\s/g, '')
       var doubanSearchLink = 'https://www.douban.com/search?q=' + nameToSearch
       axios.get(doubanSearchLink).then(res => {
         const $ = cheerio.load(res.data)
-        // 比较第一和第二给豆瓣搜索结果, 看名字是否相符
+        // 查询所有搜索结果, 看名字和年代是否相符
         var link = ''
-        var linkInDouban = $($('div.result')[0]).find('div>div>h3>a').first()
-        var nameInDouban = linkInDouban.text().replace(/\s/g, '')
-        if (nameToSearch === nameInDouban) {
-          link = linkInDouban.attr('href')
-        } else {
-          linkInDouban = $($('div.result')[1]).find('div>div>h3>a').first()
-          nameInDouban = linkInDouban.text().replace(/\s/g, '')
-          if (nameToSearch === nameInDouban) {
+        $('div.result').each(function () {
+          var linkInDouban = $(this).find('div>div>h3>a').first()
+          var nameInDouban = linkInDouban.text().replace(/\s/g, '')
+          var subjectCast = $(this).find('span.subject-cast').text()
+          if (nameToSearch === nameInDouban && subjectCast && subjectCast.includes(year)) {
             link = linkInDouban.attr('href')
           }
-        }
+        })
         if (link) {
           resolve(link)
         } else {
@@ -364,12 +421,13 @@ const zy = {
   /**
    * 获取豆瓣评分
    * @param {*} name 视频名称
+   * @param {*} year 视频年份
    * @returns 豆瓣评分
    */
-  doubanRate (name) {
+  doubanRate (name, year) {
     return new Promise((resolve, reject) => {
       var nameToSearch = name.replace(/\s/g, '')
-      this.doubanLink(nameToSearch).then(link => {
+      this.doubanLink(nameToSearch, year).then(link => {
         if (link.includes('https://www.douban.com/search')) {
           resolve('暂无评分')
         } else {

src/lib/update/update.js

@@ -1,18 +1,24 @@
 import { BrowserWindow, ipcMain } from 'electron'
-import { autoUpdater } from 'electron-updater'
+const { autoUpdater } = require('electron-updater')
 
+// electron-updater 增量更新时似乎无法显示进度
 export function initUpdater (win = BrowserWindow) {
   autoUpdater.autoDownload = false
-  autoUpdater.autoInstallOnAppQuit = false
+  autoUpdater.autoInstallOnAppQuit = true
 
   // 主进程监听检查更新事件
   ipcMain.on('checkForUpdate', () => {
     autoUpdater.checkForUpdates()
   })
 
+  // 主进程监听开始下载事件
+  ipcMain.on('downloadUpdate', () => {
+    autoUpdater.downloadUpdate()
+  })
+
   // 主进程监听退出并安装事件
   ipcMain.on('quitAndInstall', () => {
-    autoUpdater.downloadUpdate()
+    autoUpdater.quitAndInstall()
   })
 
   // 开始检测是否有更新
@@ -40,9 +46,8 @@ export function initUpdater (win = BrowserWindow) {
     win.webContents.send('download-progress', progressObj)
   })
 
-  // 下载完成并退出安装
+  // 下载完成
   autoUpdater.on('update-downloaded', () => {
     win.webContents.send('update-downloaded')
-    autoUpdater.quitAndInstall()
   })
 }

src/store/index.js

@@ -28,7 +28,8 @@ export default new Vuex.Store({
     },
     appState: {
       windowIsOnTop: false
-    }
+    },
+    DetailCache: {}
   },
   getters: {
     getView: state => {
@@ -48,6 +49,9 @@ export default new Vuex.Store({
     },
     getAppState: state => {
       return state.appState
+    },
+    getDetailCache: state => {
+      return state.DetailCache
     }
   },
   mutations: {
@@ -68,6 +72,9 @@ export default new Vuex.Store({
     },
     SET_APPSTATE: (state, payload) => {
       state.appState = payload
+    },
+    set_DetailCache: (state, payload) => {
+      state.DetailCache = payload
     }
   }
 })

yarn.lock

@@ -1116,6 +1116,23 @@
   dependencies:
     "@hapi/hoek" "^8.3.0"
 
+"@imjs/electron-differential-updater@^5.1.3":
+  version "5.1.3"
+  resolved "https://registry.npm.taobao.org/@imjs/electron-differential-updater/download/@imjs/electron-differential-updater-5.1.3.tgz#8427c387cbc20d0fe256b636d450b80312c7cbaa"
+  integrity sha1-hCfDh8vCDQ/iVrY21FC4AxLHy6o=
+  dependencies:
+    "@types/node" "^14.0.11"
+    "@types/semver" "^7.1.0"
+    app-builder-bin "^3.5.9"
+    builder-util-runtime "^8.7.1"
+    fs-extra "^9.0.1"
+    js-yaml "^3.14.0"
+    lazy-val "^1.0.4"
+    lodash.isequal "^4.5.0"
+    semver "^7.3.2"
+    watch "^1.0.2"
+    zlib "^1.0.5"
+
 "@intervolga/optimize-cssnano-plugin@^1.0.5":
   version "1.0.6"
   resolved "https://registry.npmjs.org/@intervolga/optimize-cssnano-plugin/-/optimize-cssnano-plugin-1.0.6.tgz#be7c7846128b88f6a9b1d1261a0ad06eb5c0fdf8"
@@ -1304,6 +1321,11 @@
   resolved "https://registry.npmjs.org/@types/node/-/node-12.12.49.tgz#f3dec66fce54758350d309b84f989003702f1190"
   integrity sha512-bkB9k2k7Vu35WM1N06j93QgdXuALx9Dv3j7p/XHPAFTTc7tK8LLp43WltPg/LsciKDssbsr/shYsg036QJxNug==
 
+"@types/node@^14.0.11":
+  version "14.14.11"
+  resolved "https://registry.npm.taobao.org/@types/node/download/@types/node-14.14.11.tgz?cache=0&sync_timestamp=1607444891103&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fnode%2Fdownload%2F%40types%2Fnode-14.14.11.tgz#fc25a4248a5e8d0837019b1d170146d07334abe0"
+  integrity sha1-/CWkJIpejQg3AZsdFwFG0HM0q+A=
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
   resolved "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
@@ -1324,7 +1346,7 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c"
   integrity sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==
 
-"@types/semver@^7.3.1":
+"@types/semver@^7.1.0":
   version "7.3.4"
   resolved "https://registry.npm.taobao.org/@types/semver/download/@types/semver-7.3.4.tgz#43d7168fec6fa0988bb1a513a697b29296721afb"
   integrity sha1-Q9cWj+xvoJiLsaUTppeykpZyGvs=
@@ -2021,6 +2043,11 @@ app-builder-bin@3.5.9:
   resolved "https://registry.npmjs.org/app-builder-bin/-/app-builder-bin-3.5.9.tgz#a3ac0c25286bac68357321cb2eaf7128b0bc0a4f"
   integrity sha512-NSjtqZ3x2kYiDp3Qezsgukx/AUzKPr3Xgf9by4cYt05ILWGAptepeeu0Uv+7MO+41o6ujhLixTou8979JGg2Kg==
 
+app-builder-bin@^3.5.9:
+  version "3.5.10"
+  resolved "https://registry.npm.taobao.org/app-builder-bin/download/app-builder-bin-3.5.10.tgz#4a7f9999fccc0c435b6284ae1366bc76a17c4a7d"
+  integrity sha1-Sn+ZmfzMDENbYoSuE2a8dqF8Sn0=
+
 app-builder-lib@22.7.0:
   version "22.7.0"
   resolved "https://registry.npmjs.org/app-builder-lib/-/app-builder-lib-22.7.0.tgz#ccd3e7ece2d46bc209423a77aa142f74aaf65db0"
@@ -2614,7 +2641,7 @@ builder-util-runtime@8.7.1:
     debug "^4.2.0"
     sax "^1.2.4"
 
-builder-util-runtime@8.7.2:
+builder-util-runtime@^8.7.1:
   version "8.7.2"
   resolved "https://registry.npm.taobao.org/builder-util-runtime/download/builder-util-runtime-8.7.2.tgz#d93afc71428a12789b437e13850e1fa7da956d72"
   integrity sha1-2Tr8cUKKEnibQ34ThQ4fp9qVbXI=
@@ -3352,24 +3379,16 @@ core-js@^3.6.5:
   resolved "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
   integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
 
-core-js@^3.7.0:
-  version "3.7.0"
-  resolved "https://registry.npm.taobao.org/core-js/download/core-js-3.7.0.tgz?cache=0&sync_timestamp=1604675690423&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js%2Fdownload%2Fcore-js-3.7.0.tgz#b0a761a02488577afbf97179e4681bf49568520f"
-  integrity sha1-sKdhoCSIV3r7+XF55Ggb9JVoUg8=
+core-js@^3.8.0:
+  version "3.8.1"
+  resolved "https://registry.npm.taobao.org/core-js/download/core-js-3.8.1.tgz?cache=0&sync_timestamp=1607215907966&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js%2Fdownload%2Fcore-js-3.8.1.tgz#f51523668ac8a294d1285c3b9db44025fda66d47"
+  integrity sha1-9RUjZorIopTRKFw7nbRAJf2mbUc=
 
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
   integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
 
-cors@^2.8.5:
-  version "2.8.5"
-  resolved "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
-  integrity sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==
-  dependencies:
-    object-assign "^4"
-    vary "^1"
-
 cosmiconfig@^5.0.0:
   version "5.2.1"
   resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
@@ -3645,10 +3664,10 @@ d@1, d@^1.0.1:
     es5-ext "^0.10.50"
     type "^1.0.1"
 
-danmu.js@0.2.23:
-  version "0.2.23"
-  resolved "https://registry.npm.taobao.org/danmu.js/download/danmu.js-0.2.23.tgz#339b512152ed5a8253829be007c5be5bd3821856"
-  integrity sha1-M5tRIVLtWoJTgpvgB8W+W9OCGFY=
+danmu.js@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.npm.taobao.org/danmu.js/download/danmu.js-0.3.0.tgz#10ddd456dcc9ddd1835f07569773cb880d43173a"
+  integrity sha1-EN3UVtzJ3dGDXwdWl3PLiA1DFzo=
   dependencies:
     event-emitter "^0.3.5"
 
@@ -4160,23 +4179,10 @@ electron-to-chromium@^1.3.591:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.607.tgz#1bff13f1cf89f2fee0d244b8c64a7138f80f3a3b"
   integrity sha512-h2SYNaBnlplGS0YyXl8oJWokfcNxVjJANQfMCsQefG6OSuAuNIeW+A8yGT/ci+xRoBb3k2zq1FrOvkgoKBol8g==
 
-electron-updater@^4.3.5:
-  version "4.3.5"
-  resolved "https://registry.npm.taobao.org/electron-updater/download/electron-updater-4.3.5.tgz?cache=0&sync_timestamp=1600328924432&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felectron-updater%2Fdownload%2Felectron-updater-4.3.5.tgz#4fb36f593a031c87ea07ee141c9f064d5deffb15"
-  integrity sha1-T7NvWToDHIfqB+4UHJ8GTV3v+xU=
-  dependencies:
-    "@types/semver" "^7.3.1"
-    builder-util-runtime "8.7.2"
-    fs-extra "^9.0.1"
-    js-yaml "^3.14.0"
-    lazy-val "^1.0.4"
-    lodash.isequal "^4.5.0"
-    semver "^7.3.2"
-
-electron@^11.0.2:
-  version "11.0.3"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-11.0.3.tgz#c29eaacda38ce561890e59906ca5f507c72b3ec4"
-  integrity sha512-nNfbLi7Q1xfJXOEO2adck5TS6asY4Jxc332E4Te8XfQ9hcaC3GiCdeEqk9FndNCwxhJA5Lr9jfSGRTwWebFa/w==
+electron@^11.0.3:
+  version "11.0.4"
+  resolved "https://registry.npm.taobao.org/electron/download/electron-11.0.4.tgz?cache=0&sync_timestamp=1607394603492&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felectron%2Fdownload%2Felectron-11.0.4.tgz#78b54760294eb42a36f33308a7987bf0b3dd6125"
+  integrity sha1-eLVHYClOtCo28zMIp5h78LPdYSU=
   dependencies:
     "@electron/get" "^1.0.1"
     "@types/node" "^12.0.12"
@@ -4695,6 +4701,13 @@ evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
     md5.js "^1.3.4"
     safe-buffer "^5.1.1"
 
+exec-sh@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.npm.taobao.org/exec-sh/download/exec-sh-0.2.2.tgz#2a5e7ffcbd7d0ba2755bdecb16e5a427dfbdec36"
+  integrity sha1-Kl5//L19C6J1W97LFuWkJ9+97DY=
+  dependencies:
+    merge "^1.2.0"
+
 execa@^0.8.0:
   version "0.8.0"
   resolved "https://registry.npmjs.org/execa/-/execa-0.8.0.tgz#d8d76bbc1b55217ed190fd6dd49d3c774ecfc8da"
@@ -5951,9 +5964,9 @@ inherits@2.0.3:
   integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
 ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
-  version "1.3.5"
-  resolved "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
-  integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
 inquirer@^7.1.0:
   version "7.3.0"
@@ -6943,6 +6956,11 @@ merge2@^1.2.3:
   resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
+merge@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.npm.taobao.org/merge/download/merge-1.2.1.tgz#38bebf80c3220a8a487b6fcfb3941bb11720c145"
+  integrity sha1-OL6/gMMiCopIe2/Ps5QbsRcgwUU=
+
 methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
@@ -7390,7 +7408,7 @@ oauth-sign@~0.9.0:
   resolved "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
   integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
 
-object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
@@ -10387,7 +10405,7 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
-vary@^1, vary@~1.1.2:
+vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
@@ -10533,10 +10551,18 @@ vuedraggable@^2.24.3:
   dependencies:
     sortablejs "1.10.2"
 
-vuex@^3.5.1:
-  version "3.5.1"
-  resolved "https://registry.npm.taobao.org/vuex/download/vuex-3.5.1.tgz#f1b8dcea649bc25254cf4f4358081dbf5da18b3d"
-  integrity sha1-8bjc6mSbwlJUz09DWAgdv12hiz0=
+vuex@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.npm.taobao.org/vuex/download/vuex-3.6.0.tgz?cache=0&sync_timestamp=1606318256705&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvuex%2Fdownload%2Fvuex-3.6.0.tgz#95efa56a58f7607c135b053350833a09e01aa813"
+  integrity sha1-le+lalj3YHwTWwUzUIM6CeAaqBM=
+
+watch@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npm.taobao.org/watch/download/watch-1.0.2.tgz#340a717bde765726fa0aa07d721e0147a551df0c"
+  integrity sha1-NApxe952Vyb6CqB9ch4BR6VR3ww=
+  dependencies:
+    exec-sh "^0.2.0"
+    minimist "^1.2.0"
 
 watchpack-chokidar2@^2.0.0:
   version "2.0.0"
@@ -10819,14 +10845,14 @@ xgplayer-hls.js@^2.2.5:
     event-emitter "^0.3.5"
     eventemitter3 "^4.0.7"
 
-xgplayer@^2.13.1:
-  version "2.13.1"
-  resolved "https://registry.yarnpkg.com/xgplayer/-/xgplayer-2.13.1.tgz#a463ca0f80c635dc9d3d9b1adc58b8efab7bcba2"
-  integrity sha512-dwmlCgFQBzmm8ru11RMzAvhXOvmXJURzJ7zVIxuadUa+ofTb1brzEdqwbKEw7Hf35XnwsO3R/Ve+Di96tKlmRw==
+xgplayer@^2.13.2:
+  version "2.14.4"
+  resolved "https://registry.npm.taobao.org/xgplayer/download/xgplayer-2.14.4.tgz?cache=0&sync_timestamp=1607313373198&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fxgplayer%2Fdownload%2Fxgplayer-2.14.4.tgz#d0cfacd95a08807e1783db8b8546d373a5df52e8"
+  integrity sha1-0M+s2VoIgH4Xg9uLhUbTc6XfUug=
   dependencies:
     chalk "^2.3.2"
     commander "^2.15.1"
-    danmu.js "0.2.23"
+    danmu.js "^0.3.0"
     deepmerge "^1.5.0"
     downloadjs "1.4.7"
     draggabilly "^2.2.0"
@@ -10944,3 +10970,8 @@ yorkie@^2.0.0:
     is-ci "^1.0.10"
     normalize-path "^1.0.0"
     strip-indent "^2.0.0"
+
+zlib@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npm.taobao.org/zlib/download/zlib-1.0.5.tgz#6e7c972fc371c645a6afb03ab14769def114fcc0"
+  integrity sha1-bnyXL8NxxkWmr7A6sUdp3vEU/MA=