🍤 小窗口模式基本完成, 顺便修复了一个bug

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app" :class="appTheme">
     <Aside />
-    <div class="body">
+    <div class="zy-body">
       <Frame />
       <Film v-show="view === 'Film'" />
       <Play v-show="view === 'Play'" />
@@ -67,7 +67,7 @@ html, body, #app{
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  .body{
+  .zy-body{
     flex: 1;
     height: 100%;
     display: flex;

src/assets/scss/theme/light.scss

@@ -91,10 +91,8 @@
       color: var(--l-c-3);
     }
   }
-  .home{
-    .body{
-      background-color: var(--l-bgc-2);
-    }
+  .zy-body{
+    background-color: var(--l-bgc-2);
   }
   .aside{
     .zy-svg{

src/background.js

@@ -42,11 +42,12 @@ function createWindow () {
 
 function createMini () {
   mini = new BrowserWindow({
-    width: 1140,
-    height: 360,
+    width: 540,
+    height: 335,
     frame: false,
     resizable: true,
-    transparent: false,
+    transparent: true,
+    alwaysOnTop: true,
     webPreferences: {
       webSecurity: false,
       nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
@@ -107,6 +108,17 @@ ipcMain.on('checkTop', (e) => {
 
 ipcMain.on('mini', () => {
   createMini()
+  win.close()
+})
+ipcMain.on('mini-min', () => {
+  mini.minimize()
+})
+ipcMain.on('mini-close', () => {
+  mini.close()
+  createWindow()
+})
+ipcMain.on('mini-opacity', (e, arg) => {
+  mini.setOpacity(arg)
 })
 
 app.on('ready', async () => {
@@ -114,7 +126,6 @@ app.on('ready', async () => {
     createProtocol('app')
   }
   createWindow()
-  createMini()
 })
 
 // Exit cleanly on request from parent process in development mode.

src/components/Play.vue

@@ -51,7 +51,7 @@
             <path d="M5 2h14a3 3 0 0 1 3 3v17H2V5a3 3 0 0 1 3-3z"></path>
           </svg>
         </span>
-        <span class="zy-svg" @click="smallEvent">
+        <span class="zy-svg" @click="smallEvent" v-show="right.listData.length > 0">
           <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="tvIconTitle">
             <title id="tvIconTitle">{{$t('mini')}}</title>
             <polygon points="20 8 20 20 4 20 4 8"></polygon>
@@ -80,7 +80,7 @@
     <transition name="slideX">
       <div v-if="right.show" class="list">
         <div class="list-top">
-          <span class="list-top-title">{{ right.type === 'list' ? $t('play_list') : $t('histroy') }}</span>
+          <span class="list-top-title">{{ right.type === 'list' ? $t('play_list') : $t('history') }}</span>
           <span class="list-top-close zy-svg" @click="closeEvent">
             <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">{{$t('close')}}</title>
@@ -108,6 +108,7 @@ import { mapMutations } from 'vuex'
 import tools from '../lib/site/tools'
 import history from '../lib/dexie/history'
 import video from '../lib/dexie/video'
+import mini from '../lib/dexie/mini'
 import 'xgplayer'
 import Hls from 'xgplayer-hls.js'
 const { ipcRenderer: ipc } = require('electron')
@@ -204,9 +205,6 @@ export default {
       }
       if (this.xg) {
         this.xg.pause()
-        this.xg.off('play', () => {
-          console.log('play off')
-        })
       }
       this.changeVideo()
       tools.detail_get(this.video.site, this.video.detail).then(res => {
@@ -320,8 +318,8 @@ export default {
     },
     starEvent () {
       video.find({ detail: this.video.detail }).then(res => {
-        if (res) {
-          video.remove(this.video.id).then(r => {
+        if (res !== undefined) {
+          video.remove(res.id).then(r => {
             this.$message.info(this.$t('delete_success'))
             this.isStar = false
           })
@@ -347,8 +345,20 @@ export default {
         v: this.video
       }
     },
-    smallEvent () { // TODO 小窗口模式
-      ipc.send('mini')
+    smallEvent () {
+      this.xg.pause()
+      mini.find().then(res => {
+        const d = { ...this.video }
+        delete d.id
+        if (res) {
+          mini.update(d)
+        } else {
+          d.id = 0
+          mini.add(d)
+        }
+        ipc.send('min')
+        ipc.send('mini')
+      })
     },
     shareEvent () {
       this.share = {

src/lib/dexie/index.js

@@ -11,7 +11,8 @@ db.version(1).stores({
 db.version(2).stores({
   setting: 'id, theme, site, language, cloud, cloudKey',
   video: '++id, site, name, type, time, detail, index',
-  history: '++id, site, name, type, time, detail, index, currentTime'
+  history: '++id, site, name, type, time, detail, index, currentTime',
+  mini: 'id, site, name, type, time, detail, index, currentTime'
 })
 
 const initData = [{

src/lib/dexie/mini.js

@@ -0,0 +1,13 @@
+import db from './index'
+const { mini } = db
+export default {
+  async add (doc) {
+    return await mini.add(doc)
+  },
+  async find () {
+    return await mini.get({ id: 0 })
+  },
+  async update (docs) {
+    return await mini.update(0, docs)
+  }
+}

src/mini/Mini.vue

@@ -1,14 +1,160 @@
 <template>
   <div class="mini">
-    <h1>This is an small page</h1>
-    <p>lalala</p>
+    <div class="top">
+      <div class="left">
+        <span class="opacity">
+          <input type="range" min="5" max="100" v-model="opacity" @change="opacityChange"/>
+        </span>
+      </div>
+      <div class="right">
+        <span class="min" @click="frameClickEvent('mini-min')"></span>
+        <span class="close" @click="frameClickEvent('mini-close')"></span>
+      </div>
+    </div>
+    <div class="bottom">
+      <div id="xg"></div>
+    </div>
   </div>
 </template>
 <script>
+import tools from '../lib/site/tools'
+import mini from '../lib/dexie/mini'
+import 'xgplayer'
+import Hls from 'xgplayer-hls.js'
+const ipc = require('electron').ipcRenderer
 export default {
   name: 'mini',
+  data () {
+    return {
+      xg: null,
+      config: {
+        id: 'xg',
+        lang: 'zh-cn',
+        url: '',
+        fluid: true,
+        autoplay: false,
+        videoInit: true,
+        screenShot: true,
+        keyShortcut: 'on',
+        crossOrigin: true,
+        defaultPlaybackRate: 1,
+        playbackRate: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3, 4, 5]
+      },
+      opacity: 100
+    }
+  },
+  methods: {
+    frameClickEvent (e) {
+      ipc.send(e)
+    },
+    opacityChange (e) {
+      ipc.send('mini-opacity', this.opacity / 100)
+    },
+    getUrls () {
+      mini.find().then(res => {
+        const v = res
+        tools.detail_get(v.site, v.detail).then(res => {
+          const link = res.m3u8_urls[v.index]
+          const src = link.split('$')[1]
+          this.xg.src = src
+          const currentTime = v.currentTime
+          if (currentTime !== '') {
+            this.xg.play()
+            this.xg.once('playing', () => {
+              this.xg.currentTime = currentTime
+            })
+          } else {
+            this.xg.play()
+          }
+        })
+      })
+    }
+  },
   created () {
-    console.log(window.location.href)
+    this.getUrls()
+  },
+  mounted () {
+    this.xg = new Hls(this.config)
   }
 }
 </script>
+<style lang="scss">
+html,body{
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+.mini{
+  box-sizing: border-box;
+  .top{
+    -webkit-app-region: drag;
+    width: 100%;
+    height: 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    user-select: none;
+    .left, .right{
+      width: 50%;
+    }
+    .left{
+      .opacity{
+        -webkit-app-region: no-drag;
+        margin-left: 10px;
+      }
+    }
+    .right{
+      text-align: right;
+      span{
+        -webkit-app-region: no-drag;
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        margin-right: 10px;
+        cursor: pointer;
+        opacity: 0.5;
+        &.min{
+          background-color: #ffbe2a;
+        }
+        &.close{
+          background-color: #ff5f56;
+        }
+        &:hover{
+          animation: heartbeat 3s ease-in-out infinite both;
+        }
+        @keyframes heartbeat {
+          from {
+            transform: scale(1);
+            transform-origin: center center;
+            animation-timing-function: ease-out;
+          }
+          10% {
+            opacity: 1;
+            transform: scale(0.91);
+            animation-timing-function: ease-in;
+          }
+          17% {
+            transform: scale(0.98);
+            animation-timing-function: ease-out;
+          }
+          33% {
+            transform: scale(0.87);
+            animation-timing-function: ease-in;
+          }
+          45% {
+            transform: scale(1);
+            animation-timing-function: ease-out;
+          }
+        }
+      }
+    }
+  }
+  .bottom{
+    width: 100%;
+    height: 305px;
+  }
+}
+</style>

src/mini/main.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import Mini from './Mini'
-
 Vue.config.productionTip = false
 
 new Vue({