👔 增加切换视频的遮罩

.github/workflows/release.yml

@@ -23,13 +23,5 @@ jobs:
           yarn
           yarn release
         shell: pwsh
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Release
-        uses: softprops/action-gh-release@v1
-        with:
-          files: |
-            dist_electron/win-unpacked/*.exe
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zy",
-  "version": "0.9.19",
+  "version": "0.9.25",
   "private": true,
   "author": {
     "name": "Hunlongyu",

src/assets/scss/theme.scss

@@ -34,9 +34,28 @@
   --d-bsc-2: 0 -4px 23px 0 #38dd7733;
   --d-bsc-hover: 0 14px 26px -12px #38dd7733, 0 4px 23px 0 #38dd7722, 0 8px 10px -5px #38dd7711;
   --d-bsc-scroll: inset 0 0 5px #38dd7705;
+
+  // green
+  --g-c-0: #EAEF9D;
+  --g-c-1: #EAEF9D11;
+  --g-c-2: #EAEF9D22;
+  --g-c-3: #EAEF9D33;
+  --g-c-5: #EAEF9D55;
+  --g-c-8: #EAEF9D88;
+  --g-c-9: #EAEF9D99;
+  --g-fc-1: #80B155;
+  --g-fc-2: #C1D95CAA;
+  --g-fc-3: #C1D95C;
+  --g-bgc-1: #336A29;
+  --g-bgc-2: #498428;
+  --g-bsc: 0 3px 1px -2px #C1D95C33, 0 2px 2px 0 #C1D95C22, 0 1px 5px 0 #C1D95C11;
+  --g-bsc-2: 0 -4px 23px 0 #C1D95C33;
+  --g-bsc-hover: 0 14px 26px -12px #C1D95C33, 0 4px 23px 0 #C1D95C22, 0 8px 10px -5px #C1D95C11;
+  --g-bsc-scroll: inset 0 0 5px #C1D95C05;
 }
 
 @import './theme/light.scss';
 @import './theme/dark.scss';
+@import './theme/green.scss';
 
 @import './style.scss';

src/assets/scss/theme/green.scss

@@ -0,0 +1,349 @@
+.theme-green{
+  background-color: var(--g-bgc-1);
+  .xgplayer-skin-default video{
+    background-color: var(--g-bgc-2);
+  }
+  .el-pagination{
+    background-color: var(--g-bgc-1);
+    color: var(--g-fc-1);
+    .el-pagination__total, .el-pagination__jump, .el-input__inner{
+      color: var(--g-fc-1);
+      background-color: var(--g-bgc-1);
+    }
+    .el-input__inner{
+      border-color: var(--g-c-3);
+    }
+    .el-pager{
+      .number{
+        background-color: var(--g-bgc-1);
+      }
+      .number:hover{
+        color: var(--g-c-8);
+      }
+      .active{
+        color: var(--g-c-9);
+      }
+    }
+    .more, .btn-next, .btn-prev{
+      background-color: var(--g-bgc-1);
+      &:hover{
+        color: var(--g-c-8);
+      }
+    }
+  }
+  .zy-select{
+    color: var(--g-fc-1);
+    background-color: var(--g-bgc-1);
+    box-shadow: var(--g-bsc);
+    &:hover{
+      box-shadow: var(--g-bsc-hover);
+    }
+    .vs-options{
+      background-color: var(--g-bgc-1);
+      box-shadow: var(--g-bsc);
+      ul{
+        li{
+          &:hover{
+            background-color: var(--g-c-1);
+          }
+          &.active{
+            background-color: var(--g-c-3);
+          }
+        }
+      }
+    }
+  }
+  .zy-table{
+    color: var(--g-fc-2);
+    .tHead{
+      background-color: var(--g-bgc-1);
+      border-bottom-color: var(--g-c-3);
+    }
+    .tBody{
+      border-bottom-color: var(--g-c-3);
+      ul{
+        li{
+          border-bottom-color: var(--g-c-2);
+          &:hover{
+            animation: d-tableHoverAni 0.2s ease both;
+            @keyframes d-tableHoverAni {
+              to{
+                box-shadow: var(--g-bsc-hover);
+              }
+            }
+          }
+          span{
+            &.btn:hover{
+              color: var(--g-fc-3)
+            }
+          }
+        }
+      }
+    }
+    .tFooter{
+      .tFooter-span{
+        color: var(--g-fc-1);
+      }
+    }
+  }
+  .zy-scroll{
+    &:hover{
+      &::-webkit-scrollbar-thumb {
+        box-shadow: var(--g-bsc-scroll);
+        background: var(--g-c-3);
+      }
+      &::-webkit-scrollbar-track {
+        box-shadow: var(--g-bsc-scroll);
+        background: var(--bgc);
+      }
+    }
+  }
+  .zy-loading{
+    .loader{
+      color: var(--g-c-3);
+    }
+  }
+  .zy-body{
+    background-color: var(--g-bgc-2);
+  }
+  .aside{
+    .zy-svg{
+      svg{
+        stroke: var(--g-c-0);
+      }
+      &:hover{
+        background-color: var(--g-c-2);
+      }
+      &.active{
+        svg{
+          stroke: var(--g-c-0);
+          stroke-width: 2;
+          fill: var(--g-c-2);
+        }
+      }
+    }
+  }
+  .frame{
+    span{
+      &.min{
+        background-color: #ffbe2a;
+      }
+      &.close{
+        background-color: #ff5f56;
+      }
+    }
+  }
+  .detail{
+    color: var(--g-fc-1);
+    background-color:var(--g-bgc-1);
+    box-shadow: var(--g-bsc-2);
+    .detail-content{
+      .detail-close{
+        svg{
+          stroke-width: 1;
+          stroke: var(--g-c-8);
+          &:hover{
+            stroke-width: 2px;
+            stroke: var(--g-c-9);
+          }
+        }
+      }
+      .detail-body{
+        .info, .desc, .m3u8_urls, .mp4_urls{
+          border-color: var(--g-c-2);
+        }
+        .m3u8_urls, .mp4_urls{
+          .box{
+            span{
+              border-color: var(--g-c-5);
+              &:hover{
+                color: var(--g-fc-2);
+                background-color: var(--g-c-1);
+                border-color: var(--g-c-8);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .film{
+    .top{
+      .search{
+        background-color: var(--g-bgc-1);
+        box-shadow: var(--g-bsc);
+        &:hover{
+          box-shadow: var(--g-bsc-hover);
+        }
+        svg{
+          stroke: var(--g-c-0);
+          stroke-width: 1;
+          fill: none;
+        }
+        .search-box{
+          background-color: var(--g-bgc-1);
+        }
+        &.active{
+          box-shadow: var(--g-bsc-hover);
+          svg{
+            stroke-width: 1.5;
+            fill: var(--g-c-2);
+          }
+        }
+        input{
+          color: var(--g-fc-1);
+        }
+      }
+    }
+    .middle{
+      background-color: var(--g-bgc-1);
+      box-shadow: var(--g-bsc);
+    }
+  }
+  .play{
+    background-color: var(--g-bgc-1);
+    box-shadow: var(--g-bsc);
+    .title{
+      color: var(--g-fc-1);
+    }
+    .box{
+      .more{
+        span{
+          svg{
+            stroke: var(--g-c-5);
+            stroke-width: 1;
+            fill: none;
+          }
+          &:hover{
+            svg{
+              stroke: var(--g-c-8);
+              stroke-width: 1.5;
+              fill: var(--g-c-2);
+            }
+          }
+          &.active{
+            svg{
+              stroke: var(--g-c-9);
+              stroke-width: 2;
+              fill: var(--g-c-3);
+            }
+          }
+        }
+      }
+    }
+    .list{
+      border: 1px solid var(--g-c-3);
+      background-color: var(--g-bgc-2);
+      .list-top{
+        color: var(--g-fc-2);
+        .list-top-close{
+          svg{
+            stroke: var(--g-c-5);
+            stroke-width: 1;
+            fill: none;
+            &:hover{
+              stroke: var(--g-c-8);
+              stroke-width: 1.5;
+              fill: var(--g-c-2);
+            }
+          }
+        }
+      }
+      .list-body{
+        .list-item{
+          li{
+            color: var(--g-fc-1);
+            &.active{
+              background-color: var(--g-c-2);
+              color: var(--g-fc-3);
+            }
+          }
+        }
+        .list-history{
+          li{
+            .title{
+              color: var(--g-fc-1);
+            }
+            &.active{
+              background-color: var(--g-c-2);
+              .title{
+                color: var(--g-fc-3);
+              }
+            }
+            &:hover{
+              background-color: var(--g-c-3);
+              .detail-delete{
+                display: inline-block;
+                color: var(--g-fc-2);
+              }
+            }
+            .detail-delete{
+              &:hover{
+                background-color: var(--g-c-2);
+              }
+            }
+          }
+        }
+      }
+    }
+    .play-mask{
+      background-color: var(--g-bgc-1);
+      color: var(--g-fc-1);
+    }
+  }
+  .star{
+    background-color: var(--g-bgc-1);
+    box-shadow: var(--g-bsc);
+  }
+  .setting{
+    background-color: var(--g-bgc-1);
+    box-shadow: var(--g-bsc);
+    .info{
+      a{
+        color: var(--g-fc-1);
+        &:hover{
+          color: var(--g-fc-2);
+        }
+      }
+    }
+    .theme{
+      .title{
+        color: var(--g-fc-1);
+      }
+      .theme-item{
+        box-shadow: var(--g-bsc);
+        &:hover{
+          box-shadow: var(--g-bsc-hover);
+          .theme-name{
+            color: var(--g-fc-2)
+          }
+        }
+        .theme-name{
+          color: var(--g-fc-1);
+        }
+      }
+    }
+    .qrcode{
+      .title{
+        color: var(--g-fc-1);
+      }
+      .qrcode-item{
+        box-shadow: var(--g-bsc);
+      }
+    }
+  }
+  .share{
+    background-color: var(--g-bgc-1);
+    color: var(--g-fc-1);
+    border: 1px solid var(--g-c-8);
+    .right{
+      color: var(--g-fc-1);
+      .tops{
+        color: var(--g-fc-2);
+      }
+    }
+    .share-mask{
+      background-color: var(--g-bgc-1);
+    }
+  }
+}

src/assets/scss/theme/light.scss

@@ -221,6 +221,9 @@
           }
         }
       }
+      .mask{
+        background-color: var(--l-bgc-1);
+      }
     }
     .list{
       border: 1px solid var(--l-c-3);

src/components/Play.vue

@@ -3,6 +3,9 @@
     <div class="box">
       <div class="title">{{name}}</div>
       <div id="xg"></div>
+      <div class="mask zy-loading" v-show="mask">
+        <div class="loader"></div>
+      </div>
       <div class="more" v-show="more">
         <span class="zy-svg" @click="nextEvent" v-show="showNext">
           <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="forwardIconTitle">
@@ -134,7 +137,8 @@ export default {
       more: true,
       showNext: false,
       isStar: false,
-      isTop: false
+      isTop: false,
+      mask: false
     }
   },
   computed: {
@@ -191,6 +195,7 @@ export default {
   methods: {
     ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
     getUrls () {
+      this.mask = true
       if (this.timer !== null) {
         clearInterval(this.timer)
         this.timer = null
@@ -225,15 +230,17 @@ export default {
         } else {
           this.xg.play()
         }
+        this.xg.once('play', () => {
+          this.mask = false
+        })
         this.onPlayVideo()
         this.xg.once('ended', () => {
           if (res.m3u8_urls.length > 1 && (res.m3u8_urls.length - 1 > this.video.index)) {
+            this.video.currentTime = 0
             this.video.index++
           }
           this.xg.off('ended')
         })
-      }).catch(err => {
-        this.$m.error(err)
       })
     },
     changeVideo () {
@@ -291,6 +298,7 @@ export default {
       const v = { ...this.video }
       const i = v.index + 1
       if (i < this.right.listData.length) {
+        this.video.currentTime = 0
         this.video.index++
       } else {
         this.$m.warning(this.$t('last_video'))
@@ -429,6 +437,14 @@ export default {
         cursor: pointer;
       }
     }
+    .mask{
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 600;
+    }
   }
   .list{
     position: absolute;

src/components/Setting.vue

@@ -2,7 +2,10 @@
   <div class="setting">
     <div class="setting-box zy-scroll" v-if="show.setting">
       <div class="logo"><img src="@/assets/image/logo.png"></div>
-      <div class="info"><a href="https://github.com/Hunlongyu/ZY-Player">{{$t('website')}}</a><a href="https://github.com/Hunlongyu/ZY-Player/issues/24">{{$t('issues')}}</a></div>
+      <div class="info">
+        <a @click="linkOpen('https://github.com/Hunlongyu/ZY-Player')">{{$t('website')}}</a>
+        <a @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/issues')">{{$t('issues')}} v{{pkg.version}}</a>
+      </div>
       <div class="change">
         <div class="zy-select" @mouseleave="show.language = false">
           <div class="vs-placeholder" @click="show.language = true">{{$t('language')}}</div>
@@ -36,6 +39,12 @@
             </div>
             <div class="theme-name">Dark</div>
           </div>
+          <div @click="changeTheme('green')" class="theme-item green">
+            <div class="theme-image">
+              <img src="../assets/image/green.png" alt="">
+            </div>
+            <div class="theme-name">Green</div>
+          </div>
         </div>
       </div>
       <div class="qrcode">
@@ -53,10 +62,13 @@ import { mapMutations } from 'vuex'
 import setting from '../lib/dexie/setting'
 import { sites } from '../lib/site/sites'
 import '../lib/cloud/index.js'
+import { shell } from 'electron'
+import pkg from '../../package.json'
 export default {
   name: 'setting',
   data () {
     return {
+      pkg: pkg,
       s: {},
       languages: [
         {
@@ -104,6 +116,9 @@ export default {
   },
   methods: {
     ...mapMutations(['SET_THEME', 'SET_LANGUAGE', 'SET_SITE']),
+    linkOpen (e) {
+      shell.openExternal(e)
+    },
     languageClick (e) {
       this.language = e
       this.show.language = false
@@ -169,6 +184,7 @@ export default {
       text-decoration: none;
       margin: 0 10px;
       font-size: 14px;
+      cursor: pointer;
     }
   }
   .change{

src/lib/dexie/index.js

@@ -1,6 +1,6 @@
 import Dexie from 'dexie'
 
-const db = new Dexie('ZYDB')
+const db = new Dexie('zy')
 
 db.version(1).stores({
   theme: '++id, theme',

vue.config.js

@@ -11,6 +11,8 @@ module.exports = {
           oneClick: false,
           allowToChangeInstallationDirectory: true
         },
+        appId: 'com.hunlongyu.zy',
+        copyright: 'Copyright @ 2020 Hunlongyu',
         productName: 'ZY Player 内测版',
         publish: [
           {