🗃 进一步完善小窗口模式

src/background.js

@@ -42,8 +42,10 @@ function createWindow () {
 
 function createMini () {
   mini = new BrowserWindow({
-    width: 540,
-    height: 335,
+    width: 550,
+    minWidth: 260,
+    height: 340,
+    minHeight: 180,
     frame: false,
     resizable: true,
     transparent: true,

src/components/Play.vue

@@ -231,9 +231,6 @@ export default {
             this.video.index++
           }
         })
-        this.xg.on('error', () => {
-          console.log('play error')
-        })
       }).catch(err => {
         this.$m.error(err)
       })
@@ -263,6 +260,7 @@ export default {
       const h = { ...this.video }
       history.find({ detail: h.detail }).then(res => {
         if (res) {
+          h.id = res.id
           history.update(res.id, h)
         } else {
           h.currentTime = ''
@@ -347,11 +345,11 @@ export default {
       this.xg.pause()
       mini.find().then(res => {
         const d = { ...this.video }
-        delete d.id
+        d.currentTime = this.xg.currentTime
+        d.id = 0
         if (res) {
           mini.update(d)
         } else {
-          d.id = 0
           mini.add(d)
         }
         ipc.send('min')

src/components/Star.vue

@@ -29,8 +29,6 @@
       </div>
       <div class="tFooter">
         <span class="tFooter-span">{{data.length}} {{$t('total')}}</span>
-        <span @click="oneClickUpdate">一键更新</span>
-        <span @click="cancleUpdate">取消更新</span>
       </div>
     </div>
   </div>
@@ -123,15 +121,6 @@ export default {
         v: e
       }
     },
-    oneClickUpdate () {
-      video.all().then(res => {
-        const arr = res.reverse()
-        for (const i of arr) {
-          console.log(i, 'iiiii')
-        }
-      })
-    },
-    cancleUpdate () {},
     updateEvent (e) {
       tools.detail_get(e.site, e.detail).then(res => {
         const nameOne = e.name.replace(/\s*/g, '')

src/mini/Mini.vue

@@ -2,8 +2,21 @@
   <div class="mini">
     <div class="top">
       <div class="left">
+        <span class="number">{{index + 1}} / {{length}}</span>
+        <span class="zy-svg" @click="prevEvent" v-show="show.prev">
+          <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="backIconTitle">
+            <title id="backIconTitle">Backwards</title>
+            <path d="M14 14.74L21 19V5l-7 4.26V5L2 12l12 7v-4.26z"></path>
+          </svg>
+        </span>
+        <span class="zy-svg" @click="nextEvent" v-show="show.next">
+          <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="forwardIconTitle">
+            <title id="forwardIconTitle">Forward</title>
+            <path d="M10 14.74L3 19V5l7 4.26V5l12 7-12 7v-4.26z"></path>
+          </svg>
+        </span>
         <span class="opacity">
-          <input type="range" min="5" max="100" v-model="opacity" @change="opacityChange"/>
+          <input type="number" min="5" max="100" v-model="opacity" @change="opacityChange"/>
         </span>
       </div>
       <div class="right">
@@ -19,6 +32,7 @@
 <script>
 import tools from '../lib/site/tools'
 import mini from '../lib/dexie/mini'
+import history from '../lib/dexie/history'
 import 'xgplayer'
 import Hls from 'xgplayer-hls.js'
 const ipc = require('electron').ipcRenderer
@@ -40,7 +54,15 @@ export default {
         defaultPlaybackRate: 1,
         playbackRate: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3, 4, 5]
       },
-      opacity: 100
+      opacity: 100,
+      video: {},
+      d: {},
+      show: {
+        prev: true,
+        next: true
+      },
+      index: 0,
+      length: 0
     }
   },
   methods: {
@@ -53,7 +75,17 @@ export default {
     getUrls () {
       mini.find().then(res => {
         const v = res
+        if (v.index <= 0) {
+          this.show.prev = false
+        }
+        this.video = res
         tools.detail_get(v.site, v.detail).then(res => {
+          this.d = res
+          if (v.index >= this.d.m3u8_urls.length) {
+            this.show.next = false
+          }
+          this.index = v.index
+          this.length = this.d.m3u8_urls.length
           const link = res.m3u8_urls[v.index]
           const src = link.split('$')[1]
           this.xg.src = src
@@ -66,8 +98,59 @@ export default {
           } else {
             this.xg.play()
           }
+          this.onPlayVideo()
         })
       })
+    },
+    onPlayVideo () {
+      const h = { ...this.video }
+      history.find({ detail: h.detail }).then(res => {
+        if (res) {
+          h.id = res.id
+          history.update(res.id, h)
+        } else {
+          h.currentTime = ''
+          delete h.id
+          history.add(h)
+        }
+      })
+      this.timerEvent(h.detail)
+    },
+    timerEvent (d) {
+      this.timer = setInterval(() => {
+        history.find({ detail: d }).then(res => {
+          if (res) {
+            const h = { ...this.video }
+            h.currentTime = this.xg.currentTime
+            h.id = res.id
+            history.update(res.id, h)
+          }
+        })
+      }, 10000)
+    },
+    prevEvent () {
+      if (this.index > 0) {
+        this.index--
+        let src = this.d.m3u8_urls[this.index]
+        src = src.split('$')[1]
+        this.xg.src = src
+        this.show.next = true
+      }
+      if (this.index === 0) {
+        this.show.prev = false
+      }
+    },
+    nextEvent () {
+      if (this.index < this.d.m3u8_urls.length - 1) {
+        this.index++
+        let src = this.d.m3u8_urls[this.index]
+        src = src.split('$')[1]
+        this.xg.src = src
+        this.show.prev = true
+      }
+      if (this.index === this.d.m3u8_urls.length - 1) {
+        this.show.next = false
+      }
     }
   },
   created () {
@@ -97,16 +180,44 @@ html,body{
     justify-content: space-between;
     align-items: center;
     user-select: none;
-    .left, .right{
-      width: 50%;
+    .zy-svg{
+      -webkit-app-region: no-drag;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      svg{
+        width: 24px;
+        height: 24px;
+        stroke: #fff;
+        stroke-width: 1;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        fill: none;
+      }
     }
     .left{
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex: 1;
+      .number{
+        color: #fff;
+        margin: 0 10px;
+        font-size: 12px;
+      }
       .opacity{
         -webkit-app-region: no-drag;
         margin-left: 10px;
+        input{
+          background-color: #000;
+          color: #fff;
+          border: 1px solid #aaa;
+        }
       }
     }
     .right{
+      width: 80px;
       text-align: right;
       span{
         -webkit-app-region: no-drag;