支持历史视图模式

src/components/Detail.vue

@@ -143,18 +143,21 @@ export default {
     },
     async playEvent (n) {
       if (!this.playOnline) {
+        console.log(this.detail)
         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 } }
         } 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.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 })
         if (db) {
           db.index = n
+          db.detail = this.info
           history.update(db.id, db)
         } else {
           const doc = {
@@ -164,7 +167,8 @@ export default {
             type: this.detail.info.type,
             year: this.detail.info.year,
             index: n,
-            time: ''
+            time: '',
+            detail: this.info
           }
           history.add(doc)
         }

src/components/Film.vue

@@ -410,6 +410,9 @@ 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) {

src/components/History.vue

@@ -1,12 +1,13 @@
 <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="list" @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>
     </div>
     <div class="listpage-body" id="history-body">
-      <div class="show-table" id="history-table" >
+      <div class="show-table" id="history-table" v-show="viewMode === 'list'">
         <el-table size="mini" fit height="100%" :data="history" row-key="id" @row-click="detailEvent">
           <el-table-column
             prop="name"
@@ -28,6 +29,12 @@
               <span>第{{ scope.row.index + 1 }}集</span>
             </template>
           </el-table-column>
+          <el-table-column
+            label="进度(分钟)">
+            <template slot-scope="scope">
+               <span v-if="scope.row.time && scope.row.duration">{{(scope.row.time/60).toFixed(1)}}/{{ (scope.row.duration/60).toFixed(1)}}</span>
+            </template>
+          </el-table-column>
           <el-table-column
             label="操作"
             header-align="right"
@@ -36,21 +43,64 @@
               <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="removeHistoryItem(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="historyWaterfall" :list="history" :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.time && props.data.duration">
+                    <span>{{(props.data.time/props.data.duration*100).toFixed(0)}}%</span>
+                  </div>
+                  <img style="width: 100%" :src="props.data.detail.pic" alt="" @load="$refs.historyWaterfall.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, sites } from '../lib/dexie'
+import { history, sites, setting } from '../lib/dexie'
 import zy from '../lib/site/tools'
 import Sortable from 'sortablejs'
 import { remote } from 'electron'
 import fs from 'fs'
+import Waterfall from 'vue-waterfall-plugin'
 const { clipboard } = require('electron')
 
 export default {
@@ -58,9 +108,13 @@ export default {
   data () {
     return {
       history: [],
-      sites: []
+      sites: [],
+      viewMode: setting.historyViewMode
     }
   },
+  components: {
+    Waterfall
+  },
   computed: {
     view: {
       get () {
@@ -120,6 +174,9 @@ 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) {
@@ -230,7 +287,7 @@ export default {
         return site.name
       }
     },
-    removeHistoryItem (e) {
+    deleteEvent (e) {
       history.remove(e.id).then(res => {
         this.getAllhistory()
       }).catch(err => {
@@ -257,6 +314,17 @@ export default {
           _this.updateDatabase(_this.history)
         }
       })
+    },
+    getViewMode () {
+      setting.find().then(res => {
+        this.viewMode = res.historyViewMode
+      })
+    },
+    updateViewMode () {
+      setting.find().then(res => {
+        res.historyViewMode = this.viewMode
+        setting.update(res)
+      })
     }
   },
   mounted () {
@@ -264,6 +332,7 @@ export default {
   },
   created () {
     this.getAllhistory()
+    this.getViewMode()
   }
 }
 </script>

src/components/Play.vue

@@ -437,10 +437,10 @@ export default {
           type: db.type,
           year: db.year,
           index: this.video.info.index,
-          time: db.time
+          time: db.time,
+          detail: this.video.detail
         }
-        history.remove(db.id)
-        history.add(doc)
+        history.update(db.id, doc)
       } else {
         const doc = {
           site: this.video.key,
@@ -449,7 +449,8 @@ export default {
           type: this.video.info.type,
           year: this.video.info.year,
           index: this.video.info.index,
-          time: ''
+          time: '',
+          detail: this.video.detail
         }
         history.add(doc)
       }
@@ -473,6 +474,7 @@ export default {
         if (db) {
           const doc = { ...db }
           doc.time = this.xg.currentTime
+          doc.duration = this.xg.duration
           delete doc.id
           history.update(db.id, doc)
         }

src/components/Recommendation.vue

@@ -221,9 +221,9 @@ export default {
     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 } }
+        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 } }
+        this.video = { key: e.key, info: { id: e.ids, name: e.name, index: 0 }, detail: e.detail }
       }
       this.view = 'Play'
     },

src/components/Star.vue

@@ -222,9 +222,9 @@ export default {
     },
     async playEvent (e) {
       if (e.index) {
-        this.video = { key: e.key, info: { id: e.ids, name: e.name, index: e.index } }
+        this.video = { key: e.key, info: { id: e.ids, name: e.name, index: e.index }, detail: e.detail }
       } else {
-        this.video = { key: e.key, info: { id: e.ids, name: e.name, index: 0 } }
+        this.video = { key: e.key, info: { id: e.ids, name: e.name, index: 0 }, detail: e.detail }
       }
       if (e.hasUpdate) {
         this.clearHasUpdateFlag(e)

src/lib/dexie/dexie.js

@@ -11,7 +11,7 @@ db.version(4).stores({
   star: '++id, [key+ids], site, name, detail, index, rate, hasUpdate',
   recommendation: '++id, [key+ids], site, name, detail, index, rate, hasUpdate',
   sites: '++id, key, name, api, download, isActive, group',
-  history: '++id, [site+ids], name, type, year, index, time',
+  history: '++id, [site+ids], name, type, year, index, time, detail',
   mini: 'id, site, ids, name, index, time',
   iptv: '++id, name, url, group'
 })

src/lib/dexie/initData.js

@@ -11,6 +11,7 @@ const setting = [
     forwardTimeInSec: 5,
     starViewMode: 'picture',
     recommendationViewMode: 'picture',
+    historyViewMode: 'picture',
     password: ''
   }
 ]