From dabf4390bd5922e1ac4332721adcfdc5759aaa3e Mon Sep 17 00:00:00 2001
From: hunlongyu <hunlongyu@gmail.com>
Date: Sun, 19 Jan 2020 14:37:22 +0800
Subject: [PATCH] =?UTF-8?q?v0.7.6=20=E8=B5=84=E6=BA=90=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=20=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                 |   2 +-
 src/assets/theme/light.scss |   8 +-
 src/components/detail.vue   |  67 ++++++++-----
 src/lib/sites.ts            |  10 +-
 src/page/film.vue           |  16 ++--
 src/page/player.vue         | 182 +++++++++++++++++++++++-------------
 src/page/search.vue         |  42 +++++++--
 src/page/star.vue           |   9 +-
 src/store/index.ts          |   6 +-
 9 files changed, 235 insertions(+), 107 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 34d74c7..e6ddf71 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,7 +27,7 @@
         <Setting v-show="Main === 'Setting'" />
       </el-main>
     </el-container>
-    <el-drawer class="drawer" :visible.sync="detail" :show-close="true" size="90%" :with-header="true" direction="btt" title="详情">
+    <el-drawer class="drawer" :visible.sync="detail.show" :show-close="true" size="90%" :with-header="true" direction="btt" title="详情">
       <Detail />
     </el-drawer>
   </el-container>
diff --git a/src/assets/theme/light.scss b/src/assets/theme/light.scss
index 9d37998..b2a93f3 100644
--- a/src/assets/theme/light.scss
+++ b/src/assets/theme/light.scss
@@ -9,6 +9,12 @@
   .el-pagination .btn-next, .el-pagination .btn-prev{
     color: var(--l-c);
   }
+  .el-drawer{
+    overflow: auto;
+    &::-webkit-scrollbar{
+      width: 0px;
+    }
+  }
   .Header, .Aside{
     i{
       color: var(--l-icon);
@@ -28,7 +34,7 @@
     }
   }
   .Main{
-    .film, .search, .star{
+    .film, .search, .star, .player{
       .table-box{
         &::-webkit-scrollbar-track {
           box-shadow: inset 0 0 6px var(--l-bdc);
diff --git a/src/components/detail.vue b/src/components/detail.vue
index 3401acd..b8a0fc4 100644
--- a/src/components/detail.vue
+++ b/src/components/detail.vue
@@ -2,16 +2,17 @@
   <el-row class="detail">
     <el-row class="detail-box" v-loading="loading">
       <el-row v-html="detail.box" class="box"></el-row>
-      <el-row class="urls">
-        <el-button size="mini" v-for="(i, j) in detail.urls" :key="j" @click="playBtn(i, j, video)">{{i | ftLink}}</el-button>
-      </el-row>
       <el-row v-html="detail.info" class="info"></el-row>
+      <el-row class="urls">
+        <el-button size="mini" v-for="(i, j) in detail.urls" :key="j" @click="playBtn(i, j)">{{i | ftLink}}</el-button>
+      </el-row>
     </el-row>
   </el-row>
 </template>
 <script lang="ts">
 import Vue from 'vue'
 import zy from '@/lib/util.zy'
+import { mapMutations } from 'vuex'
 export default Vue.extend({
   name: 'detail',
   data () {
@@ -21,8 +22,29 @@ export default Vue.extend({
     }
   },
   computed: {
-    video () {
-      return this.$store.getters.getVideo
+    d () {
+      return this.$store.getters.getDetail
+    },
+    video: {
+      get () {
+        return this.$store.getters.getVideo
+      },
+      set (val) {
+        this.SET_VIDEO(val)
+      }
+    },
+    Main: {
+      get () {
+        return this.$store.getters.getMain
+      },
+      set (val) {
+        this.SET_MAIN(val)
+      }
+    }
+  },
+  watch: {
+    d () {
+      this.getDetailEvent()
     }
   },
   filters: {
@@ -31,31 +53,33 @@ export default Vue.extend({
       return name
     }
   },
-  watch: {
-    video: {
-      handler (n) {
-        this.getDetailEvent(n)
-      },
-      deep: true
-    }
-  },
   methods: {
-    getDetailEvent (n: any) {
+    ...mapMutations(['SET_MAIN', 'SET_VIDEO']),
+    getDetailEvent () {
+      let url = this.d.video.detail
       this.detail = {}
       this.loading = true
-      zy.detail(n.detail).then((res: any) => {
+      zy.detail(url).then((res: any) => {
         this.detail = res
         this.loading = false
       })
     },
-    playBtn (i: string, j: number, video: any) {
-      console.log(i, j, video)
+    playBtn (i: string, j: number) {
+      if (this.Main !== 'Player') {
+        this.d.video.index = j
+        this.video = this.d.video
+        this.Main = 'Player'
+      } else {
+        this.d.video.index = j
+        this.video = this.d.video
+      }
+      this.d.show = false
     }
   },
-  created () {},
-  mounted () {
-    this.getDetailEvent(this.video)
-  }
+  created () {
+    this.getDetailEvent()
+  },
+  mounted () {}
 })
 </script>
 <style lang="scss">
@@ -124,6 +148,7 @@ export default Vue.extend({
       font-size: 14px;
     }
     .urls{
+      margin-bottom: 20px;
       padding-bottom: 0;
       button{
         margin: 0 10px 10px 0;
diff --git a/src/lib/sites.ts b/src/lib/sites.ts
index 3a47351..aaf4ff4 100644
--- a/src/lib/sites.ts
+++ b/src/lib/sites.ts
@@ -10,31 +10,31 @@ const sites:Array<Site> = [
     id: 'okzy',
     name: 'OK资源网',
     url: 'https://www.okzy.co',
-    type: [[ '最新', 0 ], [ '电影', 1 ], [ '电视剧', 2 ], [ '综艺', 3 ], [ '动漫', 4 ], [ '伦理', 21 ], [ '福利', 22 ], [ '解说', 33 ]]
+    type: [[ '最新', '0' ], [ '电影', '1' ], [ '电视剧', '2' ], [ '综艺', '3' ], [ '动漫', '4' ], [ '伦理', '21' ], [ '福利', '22' ], [ '解说', '33' ]]
   },
   {
     id: 'zuidazy',
     name: '最大资源网',
     url: 'http://www.zuidazy1.com',
-    type: [[ '最新', 0 ], [ '电影', 1 ], [ '电视剧', 2 ], [ '综艺', 3 ], [ '动漫', 4 ], [ '福利', 16 ], [ '伦理', 17 ], [ '音乐', 18 ]]
+    type: [[ '最新', '0' ], [ '电影', '1' ], [ '电视剧', '2' ], [ '综艺', '3' ], [ '动漫', '4' ], [ '福利', '16' ], [ '伦理', '17' ], [ '音乐', '18' ]]
   },
   {
     id: 'subo',
     name: '速播资源站',
     url: 'https://www.subo988.com',
-    type: [[ '最新', 0 ], [ '电影', 1 ], [ '电视剧', 2 ], [ '综艺', 3 ], [ '动漫', 4 ], [ '伦理', 16 ], [ '音乐', 20 ]]
+    type: [[ '最新', '0' ], [ '电影', '1' ], [ '电视剧', '2' ], [ '综艺', '3' ], [ '动漫', '4' ], [ '伦理', '16' ], [ '音乐', '20' ]]
   },
   {
     id: 'zuixinzy',
     name: '最新资源网',
     url: 'http://www.zuixinzy.cc',
-    type: [[ '最新', 0 ], [ '电影', 1 ], [ '电视剧', 2 ], [ '综艺', 3 ], [ '动漫', 4 ], ['伦理', 21], ['情色', 23], [ '福利', 30 ], [ '解说', 34 ]]
+    type: [[ '最新', '0' ], [ '电影', '1' ], [ '电视剧', '2' ], [ '综艺', '3' ], [ '动漫', '4' ], ['伦理', '21'], ['情色', '23'], [ '福利', '30' ], [ '解说', '34' ]]
   },
   {
     id: '123ku',
     name: '123资源网',
     url: 'https://www.123ku.com',
-    type: [[ '最新', 0 ], [ '电影', 1 ], [ '电视剧', 2 ], [ '综艺', 3 ], [ '动漫', 4 ], [ '伦理', 16 ]]
+    type: [[ '最新', '0' ], [ '电影', '1' ], [ '电视剧', '2' ], [ '综艺', '3' ], [ '动漫', '4' ], [ '伦理', '16' ]]
   }
 ]
 
diff --git a/src/page/film.vue b/src/page/film.vue
index deb019a..8956a08 100644
--- a/src/page/film.vue
+++ b/src/page/film.vue
@@ -2,7 +2,7 @@
   <el-row class="film">
     <el-row class="film-tabs">
       <el-tabs v-model="tabs" @tab-click="tabClick">
-        <el-tab-pane class="film-tabpane" v-for="(i, j) in sites[site].type" :key="j" :label="i[0]" :value="i[1]"></el-tab-pane>
+        <el-tab-pane class="film-tabpane" v-for="(i, j) in sites[site].type" :key="j" :label="i[0]" :name="i[1]"></el-tab-pane>
       </el-tabs>
     </el-row>
     <el-row class="film-table-box table-box">
@@ -48,7 +48,7 @@ export default Vue.extend({
   data () {
     return {
       sites: sites,
-      tabs: 0,
+      tabs: '0',
       filmPage: 1,
       filmTotal: 0,
       filmData: [],
@@ -84,10 +84,11 @@ export default Vue.extend({
   methods: {
     ...mapMutations(['SET_SITE', 'SET_DETAIL', 'SET_MAIN', 'SET_VIDEO']),
     tabClick (tab:any) {
-      this.getFilmList(this.site, this.filmPage, tab.$attrs.value)
+      this.getFilmList(this.site, this.filmPage, tab.name)
     },
     selectSite (e:any) {
       this.site = e
+      this.tabs = '0'
       this.filmPage = 1
       this.getFilmList(e, 1, 0)
     },
@@ -103,8 +104,11 @@ export default Vue.extend({
     },
     tableBtnClick (type: string, e: any) {
       if (type === 'detail') {
-        this.video = e
-        this.SET_DETAIL(true)
+        let d = {
+          show: true,
+          video: e
+        }
+        this.SET_DETAIL(d)
       }
       if (type === 'star') {
         video.find({ detail: e.detail }).then(res => {
@@ -144,7 +148,7 @@ export default Vue.extend({
     top: 54px;
     width: 100%;
     height: calc(100% - 100px);
-    overflow-y: scroll;
+    overflow: auto;
     &::-webkit-scrollbar{
       width: 6px;
     }
diff --git a/src/page/player.vue b/src/page/player.vue
index 5667934..c9695cb 100644
--- a/src/page/player.vue
+++ b/src/page/player.vue
@@ -1,20 +1,25 @@
 <template>
   <el-row class="player">
-    <el-row class="player-title" type="flex" justify="space-between">
-      <span>
-        <span>{{Object.keys(video).length !== 0 ? video.name : '无视频'}}</span>
-        <span v-if="video.id"> -- {{ urls[video.index] | ftLink}}</span>
-      </span>
-      <span v-if="video.id">
-        <el-button size="mini" @click="openDetail" icon="el-icon-document" circle></el-button>
-        <el-button size="mini" icon="el-icon-star-off" circle></el-button>
-      </span>
+    <el-row class="player-title">
+      <el-row class="player-title-box" type="flex" justify="space-between">
+        <span>
+          <span>{{Object.keys(video).length !== 0 ? video.name : '无视频'}}</span>
+          <span> -- {{ num }}</span>
+        </span>
+        <span v-show="Object.keys(video).length > 0">
+          <el-button size="mini" @click="openDetail" icon="el-icon-document" circle></el-button>
+          <el-button size="mini" v-show="!star" @click="starEvent" icon="el-icon-star-off" circle></el-button>
+          <el-button size="mini" v-show="star" @click="starEvent" icon="el-icon-star-on" circle></el-button>
+        </span>
+      </el-row>
     </el-row>
     <el-row class="player-box">
       <div id="xg"></div>
     </el-row>
-    <el-row class="player-films">
-      <el-button size="mini" v-for="(i, j) in urls" :key="j" @click="playBtnClick(i, j)">{{i | ftLink}}</el-button>
+    <el-row class="player-films table-box">
+      <el-row class="player-films-box">
+        <el-button :type="j === video.index ? 'primary' : ''" size="mini" v-for="(i, j) in urls" :key="j" @click="playBtnClick(i, j)" plain>{{i | ftLink}}</el-button>
+      </el-row>
     </el-row>
   </el-row>
 </template>
@@ -25,6 +30,7 @@ import zy from '@/lib/util.zy'
 import 'xgplayer'
 // @ts-ignore
 import Hls from 'xgplayer-hls.js'
+import video from '@/plugins/dexie/video'
 export default Vue.extend({
   data () {
     return {
@@ -39,16 +45,15 @@ export default Vue.extend({
         defaultPlaybackRate: 1,
         playbackRate: [0.5, 0.75, 1, 1.5, 2]
       },
-      urls: []
-    }
-  },
-  filters: {
-    ftLink (e: string) {
-      let name = e.split('$')[0]
-      return name
+      urls: [],
+      num: '',
+      star: false
     }
   },
   computed: {
+    d () {
+      return this.$store.getters.getDetail
+    },
     video: {
       get () {
         return this.$store.getters.getVideo
@@ -63,59 +68,87 @@ export default Vue.extend({
   },
   watch: {
     video: {
-      handler (n, o) {
-        if (n.id !== o.id) {
-          this.getUrls()
-        }
+      handler () {
+        this.getUrls()
       },
       deep: true
     }
   },
+  filters: {
+    ftLink (e: string) {
+      let name = e.split('$')[0]
+      return name
+    }
+  },
   methods: {
     ...mapMutations(['SET_DETAIL', 'SET_VIDEO']),
     openDetail () {
-      if (Object.keys(this.video).length > 0) {
-        this.SET_DETAIL(true)
-      }
-    },
-    playVideo (url: string) {
-      if (this.xg === null) {
-        console.log('lalal')
-        // this.config.url = 'this.video.'
-        this.xg = new Hls(this.config)
-      }
-      if (this.xg !== null) {
-        this.xg.src = url
+      let d = {
+        show: true,
+        video: this.video
       }
+      this.SET_DETAIL(d)
     },
     getUrls () {
+      if (this.xg) {
+        // @ts-ignore
+        this.xg.destroy(true)
+        this.xg = null
+      }
+      this.checkStar()
       zy.detail(this.video.detail).then((res: any) => {
         this.urls = res.urls
         if (this.xg === null) {
           let info: any = this.urls[this.video.index]
           let url = info.split('$')[1]
-          console.log(url)
+          this.num = info.split('$')[0]
           this.config.url = url
-          this.xg = new Hls(this.config)
+          this.$nextTick(() => {
+            this.xg = new Hls(this.config)
+            // @ts-ignore
+            this.xg.on('error', function () {
+              console.log('lala')
+            })
+          })
+        }
+      })
+    },
+    checkStar () {
+      video.find({ detail: this.video.detail }).then(res => {
+        if (res) {
+          this.star = true
+        } else {
+          this.star = false
+        }
+      })
+    },
+    starEvent () {
+      video.find({ detail: this.video.detail }).then(res => {
+        if (res) {
+          video.remove(res.id).then(res => {
+            if (!res) {
+              this.$message.success('删除成功')
+              this.star = false
+            } else {
+              this.$message.warning('删除失败, 请重试~')
+            }
+          })
+        } else {
+          video.add(this.video).then(res => {
+            this.star = true
+            this.$message.success('收藏成功')
+          })
         }
       })
     },
     playBtnClick (i: string, j: number) {
-      this.video.index = j
-      let url: string = i.split('$')[1]
-      this.playVideo(url)
-    }
-  },
-  created () {
-    this.getUrls()
-  },
-  mounted () {
-    if (Hls.isSupported()) {
-      if (this.xg === null) {
-        // this.xg = new Hls(this.config)
+      if (this.video.index !== j) {
+        let url = i.split('$')[1]
+        this.num = i.split('$')[0]
+        this.video.index = j
+        // @ts-ignore
+        this.xg.src = url
       }
-    } else {
-      console.log('haha')
     }
   }
 })
@@ -123,24 +156,47 @@ export default Vue.extend({
 <style lang="scss" scoped>
 .player{
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  width: 100%;
+  position: relative;
   .player-title{
-    width: 600px;
-    height: 40px;
-    line-height: 40px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    .player-title-box{
+      width: 600px;
+      margin: 0 auto;
+    }
   }
   .player-box{
+    position: absolute;
+    top: 50px;
+    left: 0;
     width: 100%;
-    height: auto;
-    display: flex;
-    justify-content: center;
+    height: 350px;
+    #xg{
+      margin: 0 auto;
+    }
   }
-  .player-btns, .player-films{
-    margin-top: 10px;
-    width: 600px;
+  .player-films{
+    position: absolute;
+    top: 400px;
+    left: 0;
+    width: 100%;
+    height: calc(100% - 400px);
+    overflow: auto;
+    button{
+      margin: 0 10px 10px 0;
+    }
+    &::-webkit-scrollbar{
+      width: 6px;
+    }
+    .player-films-box{
+      width: 600px;
+      margin: 0 auto;
+    }
   }
 }
 </style>
diff --git a/src/page/search.vue b/src/page/search.vue
index b7d30f0..aca79bf 100644
--- a/src/page/search.vue
+++ b/src/page/search.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row class="search">
-    <el-row class="search-box">
+    <el-row class="search-box" :class="table === true ? 'search-box hasTable' : 'search-box'">
       <el-input class="search-input" size="medium" clearable placeholder="请输入内容" v-model.trim="keywords" @change="searchEvent">
         <el-select v-model="site" slot="prepend" placeholder="请选择" @change="selectSite" style="width: 130px;">
           <el-option v-for="(i, j) in sites" :key="i.id" :label="i.name" :value="j"></el-option>
@@ -8,7 +8,7 @@
         <el-button slot="append" icon="el-icon-search" @click="searchEvent"></el-button>
       </el-input>
     </el-row>
-    <el-row class="search-table-box table-box">
+    <el-row v-show="table" class="search-table-box table-box">
       <el-table :data="filmData" stripe class="search-table" size="mini" v-loading="loading">
         <el-table-column prop="name" label="影片名称"></el-table-column>
         <el-table-column prop="type" label="影片类别" width="120"></el-table-column>
@@ -22,7 +22,7 @@
         </el-table-column>
       </el-table>
     </el-row>
-    <el-row class="search-bottom" type="flex" justify="end">
+    <el-row v-show="table" class="search-bottom" type="flex" justify="end">
       <el-pagination
         small
         layout="total, prev, pager, next, jumper"
@@ -43,6 +43,7 @@ import video from '@/plugins/dexie/video'
 export default Vue.extend({
   data () {
     return {
+      table: false,
       sites: sites,
       keywords: '',
       filmData: [],
@@ -89,6 +90,7 @@ export default Vue.extend({
     searchEvent () {
       if (this.keywords !== '') {
         this.loading = true
+        this.table = true
         zy.info(this.site, this.filmPage, this.keywords).then((res: any) => {
           this.filmData = res.list
           this.filmTotal = res.total
@@ -102,8 +104,11 @@ export default Vue.extend({
     },
     tableBtnClick (type: string, e: any) {
       if (type === 'detail') {
-        this.SET_DETAIL(true)
-        this.video = e
+        let d = {
+          show: true,
+          video: e
+        }
+        this.SET_DETAIL(d)
       }
       if (type === 'star') {
         video.find({ detail: e.detail }).then(res => {
@@ -135,13 +140,38 @@ export default Vue.extend({
     left: 0;
     width: 100%;
     height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    animation: slideDown 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+    @keyframes slideDown {
+      from {
+        height: 40px;
+      }
+      to{
+        height: 90%;
+      }
+    }
+    &.hasTable{
+      animation: slideUp 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+    }
+    @keyframes slideUp {
+      from {
+        height: 90%;
+        opacity: 0;
+      }
+      to{
+        height: 40px;
+        opacity: 1;
+      }
+    }
   }
   .search-table-box{
     position: absolute;
     top: 40px;
     width: 100%;
     height: calc(100% - 100px);
-    overflow-y: scroll;
+    overflow: auto;
     &::-webkit-scrollbar{
       width: 6px;
     }
diff --git a/src/page/star.vue b/src/page/star.vue
index 4413a8b..31985f7 100644
--- a/src/page/star.vue
+++ b/src/page/star.vue
@@ -73,8 +73,11 @@ export default Vue.extend({
     },
     tableBtnClick (type: string, e: any) {
       if (type === 'detail') {
-        this.SET_DETAIL(true)
-        this.video = e
+        let d = {
+          show: true,
+          video: e
+        }
+        this.SET_DETAIL(d)
       }
       if (type === 'delete') {
         video.remove(e.id).then(res => {
@@ -106,7 +109,7 @@ export default Vue.extend({
     top: 0px;
     width: 100%;
     height: calc(100% - 40px);
-    overflow-y: scroll;
+    overflow: auto;
     &::-webkit-scrollbar{
       width: 6px;
     }
diff --git a/src/store/index.ts b/src/store/index.ts
index 5fd6fbe..a5e37fe 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -7,7 +7,11 @@ export default new Vuex.Store({
   state: {
     Main: 'Player',
     site: 0,
-    detail: false,
+    detail: {
+      show: false,
+      video: ''
+    },
+    dUrl: '',
     video: {}
   },
   getters: {