From 3a29147fd6dc49a948d8b756337aa03a41c535f7 Mon Sep 17 00:00:00 2001
From: hectorqin <hectorqin@163.com>
Date: Tue, 28 Jul 2020 17:33:45 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=8F=B3=E4=B8=8A=E8=A7=92?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE,=E5=AE=8C=E5=96=84=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E5=99=A8=E6=A0=87=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/theme/dark.scss  |   3 +
 src/assets/scss/theme/green.scss |   3 +
 src/assets/scss/theme/light.scss |   3 +
 src/assets/scss/theme/pink.scss  |   3 +
 src/components/Frame.vue         |  27 ++++-
 src/components/Play.vue          | 178 ++++++++++++++++++++++++-------
 src/mini/Mini.vue                |  25 ++++-
 7 files changed, 199 insertions(+), 43 deletions(-)

diff --git a/src/assets/scss/theme/dark.scss b/src/assets/scss/theme/dark.scss
index 218f956..5d3b3f8 100644
--- a/src/assets/scss/theme/dark.scss
+++ b/src/assets/scss/theme/dark.scss
@@ -101,6 +101,9 @@
       &.close{
         background-color: #ff5f56;
       }
+      &.top{
+        background-color: #f3bab7;
+      }
     }
   }
   .detail{
diff --git a/src/assets/scss/theme/green.scss b/src/assets/scss/theme/green.scss
index aef2c45..e3097b4 100644
--- a/src/assets/scss/theme/green.scss
+++ b/src/assets/scss/theme/green.scss
@@ -101,6 +101,9 @@
       &.close{
         background-color: #ff5f56;
       }
+      &.top{
+        background-color: #f3bab7;
+      }
     }
   }
   .detail{
diff --git a/src/assets/scss/theme/light.scss b/src/assets/scss/theme/light.scss
index 935a22c..0f8a984 100644
--- a/src/assets/scss/theme/light.scss
+++ b/src/assets/scss/theme/light.scss
@@ -101,6 +101,9 @@
       &.close{
         background-color: #ff5f56;
       }
+      &.top{
+        background-color: #f3bab7;
+      }
     }
   }
   .detail{
diff --git a/src/assets/scss/theme/pink.scss b/src/assets/scss/theme/pink.scss
index 345238b..a085d88 100644
--- a/src/assets/scss/theme/pink.scss
+++ b/src/assets/scss/theme/pink.scss
@@ -101,6 +101,9 @@
       &.close{
         background-color: #ff5f56;
       }
+      &.top{
+        background-color: #f3bab7;
+      }
     }
   }
   .detail{
diff --git a/src/components/Frame.vue b/src/components/Frame.vue
index 1be5c30..5879189 100644
--- a/src/components/Frame.vue
+++ b/src/components/Frame.vue
@@ -1,14 +1,29 @@
 <template>
   <div class="frame">
-    <span class="min" @click="frameClickEvent('min')"></span>
-    <span class="max" @click="frameClickEvent('max')"></span>
-    <span class="close" @click="frameClickEvent('close')"></span>
+    <span class="min" @click="frameClickEvent('min')" title="最小化">
+      <svg t="1595917239849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1155" style="width:8px;height:14px"><path d="M0 479.936C0 444.64 28.448 416 64.064 416L959.936 416C995.328 416 1024 444.736 1024 479.936L1024 544.064C1024 579.392 995.552 608 959.936 608L64.064 608C28.672 608 0 579.264 0 544.064L0 479.936Z" p-id="1156" fill="#ffffff"></path></svg>
+    </span>
+    <span class="max" @click="frameClickEvent('max')" title="最大化">
+      <svg t="1595917343956" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1540" style="width:8px;height:14px"><path d="M416 416 64.064 416C28.448 416 0 444.64 0 479.936L0 544.064C0 579.264 28.672 608 64.064 608L416 608 416 959.936C416 995.552 444.64 1024 479.936 1024L544.064 1024C579.264 1024 608 995.328 608 959.936L608 608 959.936 608C995.552 608 1024 579.36 1024 544.064L1024 479.936C1024 444.736 995.328 416 959.936 416L608 416 608 64.064C608 28.448 579.36 0 544.064 0L479.936 0C444.736 0 416 28.672 416 64.064L416 416Z" p-id="1541" fill="#ffffff"></path></svg>
+    </span>
+    <span class="close" @click="frameClickEvent('close')" title="关闭">
+      <svg t="1595917372551" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1685" style="width:8px;height:14px"><path d="M511.968 376.224 796.096 92.096C833.536 54.624 894.4 54.624 931.84 92.096 969.312 129.568 969.312 190.4 931.84 227.872L647.744 512 931.84 796.096C969.312 833.568 969.312 894.4 931.84 931.872 894.4 969.344 833.536 969.344 796.096 931.872L511.968 647.744 227.84 931.872C190.4 969.344 129.536 969.344 92.096 931.872 54.624 894.4 54.624 833.568 92.096 796.096L376.224 512 92.096 227.872C54.624 190.4 54.624 129.568 92.096 92.096 129.536 54.624 190.4 54.624 227.84 92.096L511.968 376.224Z" p-id="1686" fill="#ffffff"></path></svg>
+    </span>
+    <span class="top" @click="frameClickEvent('top')" title="置顶">
+      <svg t="1595919317571" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1188" style="width:10px;height:14px"><path d="M43.072 974.72l380.864-301.952 151.936 161.6c0 0 63.424 17.28 67.328-30.72l-3.904-163.584 225.088-259.648 98.048-5.696c0 0 76.928-15.488 21.184-82.752l-275.072-276.928c0 0-74.944-9.6-69.248 59.584l0 75.008L383.552 367.104 225.856 376.64c0 0-57.728 19.2-36.608 69.248l148.16 146.176L43.072 974.72 43.072 974.72z" p-id="1189" :fill="isAlwaysOnTop ? '#555555' : '#ffffff'"></path></svg>
+    </span>
   </div>
 </template>
 <script>
 const { remote } = require('electron')
 export default {
   name: 'frame',
+  data () {
+    const win = remote.getCurrentWindow()
+    return {
+      isAlwaysOnTop: win.isAlwaysOnTop()
+    }
+  },
   methods: {
     frameClickEvent (e) {
       const win = remote.getCurrentWindow()
@@ -21,6 +36,10 @@ export default {
       if (e === 'close') {
         win.destroy()
       }
+      if (e === 'top') {
+        this.isAlwaysOnTop = !this.isAlwaysOnTop
+        win.setAlwaysOnTop(this.isAlwaysOnTop)
+      }
     }
   }
 }
@@ -40,6 +59,8 @@ export default {
     cursor: pointer;
     margin-left: 10px;
     border-radius: 50%;
+    text-align: center;
+    line-height: 14px;
     display: inline-block;
     -webkit-app-region: no-drag;
   }
diff --git a/src/components/Play.vue b/src/components/Play.vue
index 163b6c5..94e877e 100644
--- a/src/components/Play.vue
+++ b/src/components/Play.vue
@@ -91,7 +91,7 @@
           <ul v-show="right.type === 'history'" class="list-history">
             <li v-show="right.history.length > 1" @click="clearAllHistory">清空</li>
             <li v-show="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">{{m.name}}</span><span @click.stop="removeHistoryItem(m)" class="detail-delete">删除</span></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>
         </div>
       </div>
@@ -109,20 +109,15 @@ const { remote, ipcRenderer } = require('electron')
 
 const VIDEO_DETAIL_CACHE = {}
 
-const addPlayerBtn = function (event, svg) {
+const addPlayerBtn = function (event, svg, attrs) {
   const player = this
   console.log(player)
   const util = Player.util
   const controlEl = player.controls
   const btnConfig = player.config[event]
   if (btnConfig) {
-    let btn
     const btnName = 'xg-btn-' + event
-    if (btnConfig.type === 'img') {
-      btn = util.createImgBtn(btnName, btnConfig.url, btnConfig.width, btnConfig.height)
-    } else {
-      btn = util.createDom(btnName, svg || btnConfig.svg, {}, btnName)
-    }
+    const btn = util.createDom(btnName, svg || btnConfig.svg, attrs || {}, btnName)
     controlEl.appendChild(btn)
     const ev = ['click', 'touchend']
     ev.forEach(item => {
@@ -135,6 +130,27 @@ const addPlayerBtn = function (event, svg) {
   }
 }
 
+const addPlayerView = function (event, tpl, attrs) {
+  const player = this
+  console.log(player)
+  const util = Player.util
+  const rootEl = player.root
+  const viewConfig = player.config[event]
+  if (viewConfig) {
+    const viewName = 'xg-view-' + event
+    const view = util.createDom(viewName, tpl, attrs || {}, viewName)
+    rootEl.appendChild(view)
+    const ev = ['click', 'touchend']
+    ev.forEach(item => {
+      view.addEventListener(item, function (e) {
+        e.preventDefault()
+        e.stopPropagation()
+        player.emit(event)
+      }, false)
+    })
+  }
+}
+
 export default {
   name: 'play',
   data () {
@@ -163,7 +179,8 @@ export default {
         playPrev: true,
         playNextOne: true,
         showList: true,
-        showHistory: true
+        showHistory: true,
+        videoTitle: true
       },
       state: {
         showList: false,
@@ -242,6 +259,9 @@ export default {
         this.changeSetting()
       },
       deep: true
+    },
+    name () {
+      document.querySelector('.xg-view-videoTitle span').innerText = `『第 ${this.video.info.index + 1} 集』${this.name}`
     }
   },
   methods: {
@@ -674,8 +694,10 @@ export default {
         return false
       }
       if (e === 'escape') {
-        this.xg.exitFullscreen()
-        this.xg.exitCssFullscreen()
+        if (this.xg.fullscreen) {
+          this.xg.exitFullscreen()
+          this.xg.exitCssFullscreen()
+        }
         return false
       }
       if (e === 'next') {
@@ -779,9 +801,9 @@ export default {
             title = `第${(index + 1)}集`
           }
           if (index === this.video.info.index) {
-            li += `<li class="selected" data-index="${index}">${title}</li>`
+            li += `<li class="selected" data-index="${index}" title="${title}">${title}</li>`
           } else {
-            li += `<li data-index="${index}">${title}</li>`
+            li += `<li data-index="${index}" title="${title}">${title}</li>`
           }
         }
       }
@@ -818,14 +840,55 @@ export default {
         window.historyItemEvent = this.historyItemEvent.bind(this)
         for (let index = 0; index < this.right.history.length; index++) {
           const item = this.right.history[index]
+          const text = `【${item.site}】${item.name} 第${item.index + 1}集`
           if (this.video.info.id === item.ids) {
-            li += `<li class="selected" data-index="${index}">${item.name}</li>`
+            li += `<li class="selected" data-index="${index}" title="${text}">${text}</li>`
           } else {
-            li += `<li data-index="${index}">${item.name}</li>`
+            li += `<li data-index="${index}" title="${text}">${text}</li>`
           }
         }
       }
       ul.innerHTML = li
+    },
+    bindEvent () {
+      this.xg.on('playNextOne', () => {
+        this.nextEvent()
+      })
+
+      this.xg.on('playPrev', () => {
+        this.prevEvent()
+      })
+
+      this.xg.on('showList', () => {
+        this.toggleList()
+      })
+
+      this.xg.on('showHistory', () => {
+        this.toggleHistory()
+      })
+
+      const ev = ['click', 'touchend', 'mousemove']
+      let timerID
+      ev.forEach(item => {
+        this.xg.root.addEventListener(item, () => {
+          if (!this.xg.fullscreen) {
+            return
+          }
+          const videoTitle = document.querySelector('.xg-view-videoTitle')
+          videoTitle.style.display = 'block'
+          clearTimeout(timerID)
+          timerID = setTimeout(() => {
+            // 播放中自动消失
+            if (this.xg && !this.xg.paused) {
+              videoTitle.style.display = 'none'
+            }
+          }, 3000)
+        })
+      })
+
+      this.xg.on('exitFullscreen', () => {
+        document.querySelector('.xg-view-videoTitle').style.display = 'none'
+      })
     }
   },
   created () {
@@ -833,40 +896,32 @@ export default {
     this.mtEvent()
   },
   mounted () {
+    console.log(this)
     Player.install('playPrev', function () {
-      addPlayerBtn.bind(this, 'playPrev', '<svg t="1595866093990" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3657" style="width: 20px;height: 20px;margin-top: 11px;margin-left: 9px;" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M98.583851 3.180124h190.807453a31.801242 31.801242 0 0 1 31.801243 31.801242v387.021118L902.201242 10.176398l11.130435-7.632299A31.801242 31.801242 0 0 1 957.217391 31.801242v960.397516a31.801242 31.801242 0 0 1-43.885714 29.257143l-11.130435-7.632299L321.192547 601.997516V989.018634a31.801242 31.801242 0 0 1-31.801243 31.801242H98.583851a31.801242 31.801242 0 0 1-31.801242-31.801242v-954.037268a31.801242 31.801242 0 0 1 31.801242-31.801242z" p-id="3658" fill="#ffffff"></path></svg>')()
+      addPlayerBtn.bind(this, 'playPrev', '<svg t="1595866093990" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3657" style="width: 20px;height: 20px;margin-top: 11px;margin-left: 9px;" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M98.583851 3.180124h190.807453a31.801242 31.801242 0 0 1 31.801243 31.801242v387.021118L902.201242 10.176398l11.130435-7.632299A31.801242 31.801242 0 0 1 957.217391 31.801242v960.397516a31.801242 31.801242 0 0 1-43.885714 29.257143l-11.130435-7.632299L321.192547 601.997516V989.018634a31.801242 31.801242 0 0 1-31.801243 31.801242H98.583851a31.801242 31.801242 0 0 1-31.801242-31.801242v-954.037268a31.801242 31.801242 0 0 1 31.801242-31.801242z" p-id="3658" fill="#ffffff"></path></svg>', { title: '上一集' })()
     })
     Player.install('playNextOne', function () {
-      addPlayerBtn.bind(this, 'playNextOne', '<svg t="1595866110378" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3946" style="width: 20px;height: 20px;margin-top: 11px;margin-left: 0px;" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M925.416149 3.180124h-190.807453a31.801242 31.801242 0 0 0-31.801243 31.801242v387.021118L121.798758 10.176398 110.668323 2.544099A31.801242 31.801242 0 0 0 98.583851 0a31.801242 31.801242 0 0 0-31.801242 31.801242v960.397516a31.801242 31.801242 0 0 0 31.801242 31.801242 31.801242 31.801242 0 0 0 12.084472-2.544099l11.130435-7.632299L702.807453 601.997516V989.018634a31.801242 31.801242 0 0 0 31.801243 31.801242h190.807453a31.801242 31.801242 0 0 0 31.801242-31.801242v-954.037268a31.801242 31.801242 0 0 0-31.801242-31.801242z" p-id="3947" fill="#ffffff"></path></svg>')()
+      addPlayerBtn.bind(this, 'playNextOne', '<svg t="1595866110378" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3946" style="width: 20px;height: 20px;margin-top: 11px;margin-left: 0px;" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M925.416149 3.180124h-190.807453a31.801242 31.801242 0 0 0-31.801243 31.801242v387.021118L121.798758 10.176398 110.668323 2.544099A31.801242 31.801242 0 0 0 98.583851 0a31.801242 31.801242 0 0 0-31.801242 31.801242v960.397516a31.801242 31.801242 0 0 0 31.801242 31.801242 31.801242 31.801242 0 0 0 12.084472-2.544099l11.130435-7.632299L702.807453 601.997516V989.018634a31.801242 31.801242 0 0 0 31.801243 31.801242h190.807453a31.801242 31.801242 0 0 0 31.801242-31.801242v-954.037268a31.801242 31.801242 0 0 0-31.801242-31.801242z" p-id="3947" fill="#ffffff"></path></svg>', { title: '下一集' })()
     })
     Player.install('showList', function () {
-      addPlayerBtn.bind(this, 'showList', '<svg t="1595866128681" class="icon" viewBox="0 0 1316 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4187" style="width: 22px;height: 22px;margin-top: 9px;margin-left: 6px;" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M0 0h1316.571429v146.285714H0zM0 438.857143h1316.571429v146.285714H0zM0 877.714286h1316.571429v146.285714H0z" p-id="4188" fill="#ffffff"></path></svg>')()
+      addPlayerBtn.bind(this, 'showList', '<svg t="1595866128681" class="icon" viewBox="0 0 1316 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4187" style="width: 22px;height: 22px;margin-top: 9px;margin-left: 6px;" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M0 0h1316.571429v146.285714H0zM0 438.857143h1316.571429v146.285714H0zM0 877.714286h1316.571429v146.285714H0z" p-id="4188" fill="#ffffff"></path></svg>', { title: '播放列表' })()
     })
     Player.install('showHistory', function () {
-      addPlayerBtn.bind(this, 'showHistory', '<svg t="1595866015473" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3282" style="width: 22px;height: 22px;margin-top: 9px;margin-left: 6px;" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m0 910.222222a398.222222 398.222222 0 1 1 398.222222-398.222222 398.222222 398.222222 0 0 1-398.222222 398.222222z" p-id="3283" fill="#ffffff"></path><path d="M568.888889 227.555556h-113.777778v341.333333h227.555556v-113.777778h-113.777778V227.555556z" p-id="3284" fill="#ffffff"></path></svg>')()
+      addPlayerBtn.bind(this, 'showHistory', '<svg t="1595866015473" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3282" style="width: 22px;height: 22px;margin-top: 9px;margin-left: 6px;" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m0 910.222222a398.222222 398.222222 0 1 1 398.222222-398.222222 398.222222 398.222222 0 0 1-398.222222 398.222222z" p-id="3283" fill="#ffffff"></path><path d="M568.888889 227.555556h-113.777778v341.333333h227.555556v-113.777778h-113.777778V227.555556z" p-id="3284" fill="#ffffff"></path></svg>', { title: '播放历史' })()
+    })
+    const that = this
+    Player.install('videoTitle', function () {
+      addPlayerView.bind(this, 'videoTitle', `<span>『第 ${that.video.info.index + 1} 集』${that.name}</span>`, {})()
     })
 
     this.xg = new Hls(this.config)
     ipcRenderer.on('miniClosed', () => {
       this.xg.destroy()
       this.xg = new Hls(this.config)
+      this.bindEvent()
       this.getUrls()
     })
-    this.xg.on('playNextOne', () => {
-      this.nextEvent()
-    })
-
-    this.xg.on('playPrev', () => {
-      this.prevEvent()
-    })
-
-    this.xg.on('showList', () => {
-      this.toggleList()
-    })
-
-    this.xg.on('showHistory', () => {
-      this.toggleHistory()
-    })
+    this.bindEvent()
   },
   beforeDestroy () {
     clearInterval(this.timer)
@@ -884,6 +939,9 @@ export default {
   cursor: pointer;
   margin-left: 3px;
 }
+.xgplayer-skin-default .xg-btn-playPrev:hover {
+  opacity: 0.8;
+}
 .xgplayer-skin-default .xg-btn-playNextOne {
   width: 32px;
   position: relative;
@@ -894,6 +952,9 @@ export default {
   cursor: pointer;
   margin-left: 3px;
 }
+.xgplayer-skin-default .xg-btn-playNextOne:hover {
+  opacity: 0.8;
+}
 .xgplayer-skin-default .xgplayer-play, .xgplayer-skin-default .xgplayer-play-img {
   order: 1 !important;
 }
@@ -907,6 +968,9 @@ export default {
   cursor: pointer;
   margin-right: 3px;
 }
+.xgplayer-skin-default .xg-btn-showList:hover {
+  opacity: 0.8;
+}
 .xgplayer-skin-default .xg-btn-showHistory {
   width: 32px;
   position: relative;
@@ -917,16 +981,20 @@ export default {
   cursor: pointer;
   margin-right: 3px;
 }
+.xgplayer-skin-default .xg-btn-showHistory:hover {
+  opacity: 0.8;
+}
 .xgplayer-skin-default .xg-btn-showList ul, .xgplayer-skin-default .xg-btn-showHistory ul {
     display: none;
     list-style: none;
-    width: 78px;
+    min-width: 85px;
+    max-width: 300px;
     max-height: 60vh;
     overflow: scroll;
     background: rgba(0,0,0,.54);
     border-radius: 1px;
     position: absolute;
-    bottom: 50px;
+    bottom: 45px;
     left: 50%;
     -webkit-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
@@ -939,7 +1007,7 @@ export default {
 .xgplayer-skin-default .xg-btn-showList ul li, .xgplayer-skin-default .xg-btn-showHistory ul li {
     opacity: .7;
     font-family: PingFangSC-Regular;
-    font-size: 12px;
+    font-size: 13px;
     color: hsla(0,0%,100%,.8);
     position: relative;
     padding: 5px;
@@ -949,10 +1017,46 @@ export default {
     position: relative;
     margin-top: 12px;
 }
+.xgplayer-skin-default .xg-btn-showList ul li:last-child, .xgplayer-skin-default .xg-btn-showHistory ul li:last-child {
+    margin-bottom: 12px;
+}
 .xgplayer-skin-default .xg-btn-showList ul li.selected, .xgplayer-skin-default .xg-btn-showHistory ul li.selected, .xgplayer-skin-default .xg-btn-showList ul li:hover, .xgplayer-skin-default .xg-btn-showHistory ul li:hover {
     color: #fff;
     opacity: 1;
 }
+.xgplayer-skin-default .xgplayer-volume {
+    width: 32px !important;
+}
+.xgplayer-skin-default .xgplayer-playbackrate {
+    width: 40px !important;
+}
+.xgplayer-skin-default .xgplayer-playbackrate .name {
+    top: 10px !important;
+}
+.xgplayer-skin-default .xgplayer-playbackrate ul {
+  bottom: 25px;
+}
+.xgplayer-skin-default .xgplayer-playbackrate ul li {
+    font-size: 13px !important;
+}
+.xgplayer-skin-default .xgplayer-screenshot .name span {
+    width: 40px !important;
+}
+.xgplayer-skin-default .xg-view-videoTitle {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 40px;
+  background-image: linear-gradient(180deg,transparent,rgba(0,0,0,.37),rgba(0,0,0,.75),rgba(0,0,0,.75));
+  z-index: 10;
+}
+.xgplayer-skin-default .xg-view-videoTitle span {
+  font-size: 16px;
+  line-height: 40px;
+  color: #ffffff;
+}
 </style>
 <style lang="scss" scoped>
 .play{
diff --git a/src/mini/Mini.vue b/src/mini/Mini.vue
index 3c2cbda..89c92fd 100644
--- a/src/mini/Mini.vue
+++ b/src/mini/Mini.vue
@@ -22,8 +22,15 @@
         <span class="progress" v-show="progress > 0">播放进度: {{progress}}%</span>
       </div>
       <div class="right">
-        <span class="min" @click="frameClickEvent('min')"></span>
-        <span class="close" @click="frameClickEvent('close')"></span>
+        <span class="min" @click="frameClickEvent('min')" title="最小化">
+          <svg t="1595917239849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1155" style="width:10px;height:16px"><path d="M0 479.936C0 444.64 28.448 416 64.064 416L959.936 416C995.328 416 1024 444.736 1024 479.936L1024 544.064C1024 579.392 995.552 608 959.936 608L64.064 608C28.672 608 0 579.264 0 544.064L0 479.936Z" p-id="1156" fill="#ffffff"></path></svg>
+        </span>
+        <span class="close" @click="frameClickEvent('close')" title="关闭">
+          <svg t="1595917372551" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1685" style="width:10px;height:16px"><path d="M511.968 376.224 796.096 92.096C833.536 54.624 894.4 54.624 931.84 92.096 969.312 129.568 969.312 190.4 931.84 227.872L647.744 512 931.84 796.096C969.312 833.568 969.312 894.4 931.84 931.872 894.4 969.344 833.536 969.344 796.096 931.872L511.968 647.744 227.84 931.872C190.4 969.344 129.536 969.344 92.096 931.872 54.624 894.4 54.624 833.568 92.096 796.096L376.224 512 92.096 227.872C54.624 190.4 54.624 129.568 92.096 92.096 129.536 54.624 190.4 54.624 227.84 92.096L511.968 376.224Z" p-id="1686" fill="#ffffff"></path></svg>
+        </span>
+        <span class="top" @click="frameClickEvent('top')" title="置顶">
+          <svg t="1595919317571" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1188" style="width:12px;height:16px"><path d="M43.072 974.72l380.864-301.952 151.936 161.6c0 0 63.424 17.28 67.328-30.72l-3.904-163.584 225.088-259.648 98.048-5.696c0 0 76.928-15.488 21.184-82.752l-275.072-276.928c0 0-74.944-9.6-69.248 59.584l0 75.008L383.552 367.104 225.856 376.64c0 0-57.728 19.2-36.608 69.248l148.16 146.176L43.072 974.72 43.072 974.72z" p-id="1189" :fill="isAlwaysOnTop ? '#555555' : '#ffffff'"></path></svg>
+        </span>
       </div>
     </div>
     <div class="bottom">
@@ -41,6 +48,7 @@ const { remote, ipcRenderer } = require('electron')
 export default {
   name: 'mini',
   data () {
+    const win = remote.getCurrentWindow()
     return {
       xg: null,
       config: {
@@ -65,7 +73,8 @@ export default {
       detail: {},
       m3u8Arr: [],
       rate: 1,
-      progress: 0
+      progress: 0,
+      isAlwaysOnTop: win.isAlwaysOnTop()
     }
   },
   methods: {
@@ -79,6 +88,11 @@ export default {
         ipcRenderer.send('win')
         return false
       }
+      if (e === 'top') {
+        this.isAlwaysOnTop = !this.isAlwaysOnTop
+        const win = remote.getCurrentWindow()
+        win.setAlwaysOnTop(this.isAlwaysOnTop)
+      }
     },
     opacityChange (val) {
       const win = remote.getCurrentWindow()
@@ -427,6 +441,8 @@ html,body{
         display: inline-block;
         width: 16px;
         height: 16px;
+        text-align: center;
+        line-height: 16px;
         border-radius: 50%;
         margin-right: 10px;
         cursor: pointer;
@@ -437,6 +453,9 @@ html,body{
         &.close{
           background-color: #ff5f56;
         }
+        &.top{
+          background-color: #f3bab7;
+        }
         &:hover{
           animation: heartbeat 3s ease-in-out infinite both;
         }