🎗 修复无法软件重置 bug 🎨

fix typo

.github/workflows/build.yml

@@ -0,0 +1,26 @@
+name: release-build
+
+on:
+  push:
+    branches: [ master ]
+
+jobs:
+  release:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [windows-latest, macos-latest, ubuntu-latest]
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+
+      - run: |
+          yarn
+          yarn release
+        shell: pwsh
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yml

@@ -24,4 +24,4 @@ jobs:
           yarn release
         shell: pwsh
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/x86.yml

@@ -0,0 +1,35 @@
+name: release-build
+
+on:
+  push:
+    tags:
+      - x86 *
+
+jobs:
+  release:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [windows-latest]
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+
+      - run: |
+          yarn
+          yarn dist
+        shell: pwsh
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v2
+        with:
+          name: dist_electron
+          path: dist_electron/*.exe
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -10,6 +10,7 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 
 # Editor directories and files
 .idea

README.md

@@ -1,5 +1,9 @@
 <p align="center">
-<img src="https://i.loli.net/2020/02/22/jvfBbnEuOq5RS9J.png" >
+<img width="128" src="https://i.loli.net/2020/05/07/9kLvPnWVCp7538c.png" >
+</p>
+<p align="center">
+<a href="http://zyplayer.fun/" target="_blank">官网</a>
+<a href="https://github.com/Hunlongyu/ZY-Player/issues" target="_blank">反馈</a>
 </p>
 <p align="center">
 <img src="https://forthebadge.com/images/badges/built-with-love.svg">
@@ -17,26 +21,153 @@
 <img src="https://img.shields.io/github/workflow/status/Hunlongyu/ZY-Player/release-build?style=for-the-badge">
 <p>
 
+# ZY Player 资源播放器
 
-## ZY Player
+# 目录
+- [特性](#特性)
+  - [全局快捷键](#全局快捷键)
+  - [下载](#下载)
+  - [赞助](#赞助)
+  - [截图](#截图)
+- [开发向导](#开发向导)
+- [准备环境](#准备环境)
+  - [nodejs安装](#nodejs安装)
+  - [npm配置](#npm配置)
+    - [翻墙代理设置](#翻墙代理设置)
+    - [镜像源设置](#镜像源设置)
+- [代码IDE](#代码IDE)
+- [安装依赖](#安装依赖)
+- [调试开发](#调试开发)
+- [打包发布](#打包发布)
 
+## 特性
 
-### 新版内测
+1. 全平台支持. Windows, Mac, Linux
+2. 支持更多视频源，支持自定义视频源
+3. 支持海报模式和列表模式
+4. 支持瀑布流 无限加载
+5. 支持历史播放记录，自动跳转播放进度
+6. 支持快捷键，使用更便捷，支持自定义快捷键
+7. 支持搜索历史记录
+8. 支持分享功能
+9. 支持精简模式，划水新高度
+10. 支持导出资源下载链接
+11. 收藏夹同步功能，追剧更方便
+12. 自动更新
 
-新版本: v0.9.x 已开发完, 现进行内测, [点击查看内测公告](https://github.com/Hunlongyu/ZY-Player/issues/24)
+觉得软件不错的, 点击右上角 star 收藏关注一波呀~
 
-[点击这里可以查看开发计划](https://github.com/Hunlongyu/ZY-Player/projects/3). 
+#### 快捷键:
 
-大家有什么新的需求建议欢迎踊跃提出[点击这里提意见](https://github.com/Hunlongyu/ZY-Player/issues/14)
+播放窗口 和 Mini窗口
 
-1. [Github -- 官方下载](https://github.com/Hunlongyu/ZY-Player/releases)
+|          快捷键          | 说明       |          快捷键          | 说明       |
+| :----------------------: | ---------- | :----------------------: | ---------- |
+| `Alt + Space` | 聚焦或取消聚焦（全局快捷键）| | |
+| `→` | 快进 5 秒 | `←` | 快退 5 秒 |
+| `↑` | 音量调高 | `↓` | 音量调低 |
+| `m` | 静音 | `t` | 置顶或退出置顶 |
+| `f` | 进入或退出全屏 | `esc` | 退出全屏 |
+| `Alt + →` | 下一集 | `Alt + ←` | 上一集 |
+| `Alt + ↑` | 透明度调高 | `Alt + ↓` | 透明度调低 |
+| `home` | 跳到视频开始位置 | `end` | 跳到视频结束位置 |
+| `pgUp` | 播放倍速加快 0.25 | `pgDown` | 播放倍速减慢 0.25 |
+| `Alt + m` | 进入或退出 Mini 模式 | `space` | 播放或暂停 |
 
-2. [蓝奏云 -- 快速下载](https://www.lanzous.com/b04s6a3re) 密码:95px
+#### 下载:
+
+1. [Github -- 官方下载(最新版)](https://github.com/Hunlongyu/ZY-Player/releases)
+
+2. [蓝奏云 -- 快速下载(老版本)](https://www.lanzous.com/b04s6a3re) 密码:95px
+
+3. 适用于32位操作系统的x86软件,在蓝奏云网盘里, 后缀名: ZY Player * 32位.exe
+
+#### 赞助
+[![LATOPAY](https://latopay.com/w/lt-bg-2062.png)](https://latopay.com/@Hunlongyu)
 
 #### 截图: 
-![001.png](https://i.loli.net/2020/04/28/T3YZvStwNQJ5aHy.png)
-![003.png](https://i.loli.net/2020/04/28/2xYw9nIyWSZ5Rsr.png)
-![002.png](https://i.loli.net/2020/04/28/sxnY28hgFcpUrb9.png)
+
+0. 分享 ⇣ ↓
+![share.gif](https://i.loli.net/2020/06/05/hbJwBXlx194umcO.gif)
+
+1. 浏览 ⇣ ↓
+![01浏览.png](https://i.loli.net/2020/05/18/MshDLnXq2CTpoBy.png)
+2. 搜索 ⇣ ↓
+![02搜索.png](https://i.loli.net/2020/05/20/QgJqDkcjpeiRvBb.png)
+3. 详情 ⇣ ↓
+![03详情.png](https://i.loli.net/2020/05/18/s7gUj6unEfyYb4Z.png)
+4. 播放 ⇣ ↓
+![04播放.png](https://i.loli.net/2020/05/18/WqgnOw3mHd6e5uU.png)
+5. 收藏 ⇣ ↓
+![05收藏.png](https://i.loli.net/2020/05/18/bhIgeGMTPWmrdYi.png)
+6. 白色主题皮肤 ⇣ ↓
+![06白色.png](https://i.loli.net/2020/05/18/UgiVZ89dhkuxDBI.png)
+7. 绿色主题皮肤 ⇣ ↓
+![07绿色.png](https://i.loli.net/2020/05/18/4d2UnFRECm7vyJQ.png)
+8. 粉色色主题皮肤 ⇣ ↓
+![08粉色.png](https://i.loli.net/2020/05/18/PLlEfzd8mSC9vMW.png)
 
 ### 重要: 
 所有资源来自网上, 该软件不参与任何制作, 上传, 储存, 下载等内容. 该软件仅供学习参考, 请于安装后24小时内删除.
+
+## 开发指导
+软件基于nodejs, vue, electron, 如果想成为一个有追求的码农，你先考虑一下自己是否具备上述几个关键词的知识储备，如果没有，建议先百度了解下。这里的开发环境基于linux发行版mint, 其他大同小异，自行发挥。
+
+### 准备环境
+
+#### nodejs安装
+* [LINK1](https://nodejs.org/zh-cn/)
+* [LINK2](https://www.jianshu.com/p/13f45e24b1de/)
+
+#### npm配置
+天朝的网络环境都有耳闻，想顺利开发，要么翻墙，要么镜像源，以下按照自己的水平二选一
+
+#### 翻墙代理设置
+自备http代理，sock5代理转换，参考privoxy
+```bash
+设置代理
+npm config set proxy=http://127.0.0.1:8087
+npm config set registry=http://registry.npmjs.org
+
+
+关于https
+经过上面设置使用了http开头的源，因此不需要设https_proxy了，否则还要增加一句:
+
+npm config set https-proxy http://server:port
+
+代理用户名和密码
+npm config set proxy http://username:password@server:port
+npm confit set https-proxy http://username:password@server:port
+
+取消代理
+npm config delete proxy
+npm config delete https-proxy
+```
+
+#### 镜像源设置
+这里使用阿里的npm镜像
+```bash
+npm install -g cnpm --registry=https://registry.npm.taobao.org
+```
+搞定后使用cnpm代替所有的npm命令即可，切记使用一致，切记切记
+
+* [参考网页链接](https://developer.aliyun.com/mirror/NPM?from=tnpm)
+
+### 代码IDE
+随心所欲吧，这里安利vscode
+
+### 安装依赖
+```bash
+npm install 
+or 
+cnpm install 
+```
+### 调试开发
+```bash
+npm run dev
+```
+
+### 打包发布
+```
+npm run electron:build
+```

docs/assets/js/main.js

@@ -0,0 +1,156 @@
+/**
+* Template Name: Appland - v2.0.0
+* Template URL: https://bootstrapmade.com/free-bootstrap-app-landing-page-template/
+* Author: BootstrapMade.com
+* License: https://bootstrapmade.com/license/
+*/
+!(function($) {
+  "use strict";
+
+  // Toggle .header-scrolled class to #header when page is scrolled
+  $(window).scroll(function() {
+    if ($(this).scrollTop() > 100) {
+      $('#header').addClass('header-scrolled');
+    } else {
+      $('#header').removeClass('header-scrolled');
+    }
+  });
+
+  if ($(window).scrollTop() > 100) {
+    $('#header').addClass('header-scrolled');
+  }
+
+  // Smooth scroll for the navigation menu and links with .scrollto classes
+  $(document).on('click', '.nav-menu a, .mobile-nav a, .scrollto', function(e) {
+    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+      e.preventDefault();
+      var target = $(this.hash);
+      if (target.length) {
+        var scrollto = target.offset().top;
+        var scrolled = 20;
+        if ($('#header').length) {
+          scrollto -= $('#header').outerHeight()
+          if (!$('#header').hasClass('header-scrolled')) {
+            scrollto += scrolled;
+          }
+        }
+        if ($(this).attr("href") == '#header') {
+          scrollto = 0;
+        }
+        $('html, body').animate({
+          scrollTop: scrollto
+        }, 1500, 'easeInOutExpo');
+        if ($(this).parents('.nav-menu, .mobile-nav').length) {
+          $('.nav-menu .active, .mobile-nav .active').removeClass('active');
+          $(this).closest('li').addClass('active');
+        }
+        if ($('body').hasClass('mobile-nav-active')) {
+          $('body').removeClass('mobile-nav-active');
+          $('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
+          $('.mobile-nav-overly').fadeOut();
+        }
+        return false;
+      }
+    }
+  });
+
+  // Mobile Navigation
+  if ($('.nav-menu').length) {
+    var $mobile_nav = $('.nav-menu').clone().prop({
+      class: 'mobile-nav d-lg-none'
+    });
+    $('body').append($mobile_nav);
+    $('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="icofont-navigation-menu"></i></button>');
+    $('body').append('<div class="mobile-nav-overly"></div>');
+    $(document).on('click', '.mobile-nav-toggle', function(e) {
+      $('body').toggleClass('mobile-nav-active');
+      $('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
+      $('.mobile-nav-overly').toggle();
+    });
+    $(document).on('click', '.mobile-nav .drop-down > a', function(e) {
+      e.preventDefault();
+      $(this).next().slideToggle(300);
+      $(this).parent().toggleClass('active');
+    });
+    $(document).click(function(e) {
+      var container = $(".mobile-nav, .mobile-nav-toggle");
+      if (!container.is(e.target) && container.has(e.target).length === 0) {
+        if ($('body').hasClass('mobile-nav-active')) {
+          $('body').removeClass('mobile-nav-active');
+          $('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
+          $('.mobile-nav-overly').fadeOut();
+        }
+      }
+    });
+  } else if ($(".mobile-nav, .mobile-nav-toggle").length) {
+    $(".mobile-nav, .mobile-nav-toggle").hide();
+  }
+
+  // Back to top button
+  $(window).scroll(function() {
+    if ($(this).scrollTop() > 100) {
+      $('.back-to-top').fadeIn('slow');
+    } else {
+      $('.back-to-top').fadeOut('slow');
+    }
+  });
+  $('.back-to-top').click(function() {
+    $('html, body').animate({
+      scrollTop: 0
+    }, 1500, 'easeInOutExpo');
+    return false;
+  });
+
+  // Gallery carousel (uses the Owl Carousel library)
+  $(".gallery-carousel").owlCarousel({
+    autoplay: true,
+    dots: true,
+    loop: true,
+    center: true,
+    margin: 25,
+    responsive: {
+      0: {
+        items: 1
+      },
+      768: {
+        items: 3
+      },
+      992: {
+        items: 4
+      },
+      1200: {
+        items: 5
+      }
+    }
+  });
+
+  // Initiate venobox lightbox
+  $(document).ready(function() {
+    $('.venobox').venobox();
+  });
+
+  // Testimonials carousel (uses the Owl Carousel library)
+  $(".testimonials-carousel").owlCarousel({
+    autoplay: true,
+    dots: true,
+    loop: true,
+    responsive: {
+      0: {
+        items: 1
+      },
+      768: {
+        items: 1
+      },
+      900: {
+        items: 2
+      }
+    }
+  });
+
+  // Initi AOS
+  AOS.init({
+    duration: 800,
+    easing: "ease-in-out"
+  });
+
+})(jQuery);

docs/assets/vendor/bootstrap/css/bootstrap-reboot.css

@@ -0,0 +1,327 @@
+/*!
+ * Bootstrap Reboot v4.4.1 (https://getbootstrap.com/)
+ * Copyright 2011-2019 The Bootstrap Authors
+ * Copyright 2011-2019 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
+  display: block;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  text-align: left;
+  background-color: #fff;
+}
+
+[tabindex="-1"]:focus:not(:focus-visible) {
+  outline: 0 !important;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title],
+abbr[data-original-title] {
+  text-decoration: underline;
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  border-bottom: 0;
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: .5rem;
+  margin-left: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -.25em;
+}
+
+sup {
+  top: -.5em;
+}
+
+a {
+  color: #007bff;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+a:hover {
+  color: #0056b3;
+  text-decoration: underline;
+}
+
+a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:not([href]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1em;
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+
+svg {
+  overflow: hidden;
+  vertical-align: middle;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  color: #6c757d;
+  text-align: left;
+  caption-side: bottom;
+}
+
+th {
+  text-align: inherit;
+}
+
+label {
+  display: inline-block;
+  margin-bottom: 0.5rem;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+select {
+  word-wrap: normal;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+button:not(:disabled),
+[type="button"]:not(:disabled),
+[type="reset"]:not(:disabled),
+[type="submit"]:not(:disabled) {
+  cursor: pointer;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+  -webkit-appearance: listbox;
+}
+
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  padding: 0;
+  margin-bottom: .5rem;
+  font-size: 1.5rem;
+  line-height: inherit;
+  color: inherit;
+  white-space: normal;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  outline-offset: -2px;
+  -webkit-appearance: none;
+}
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+template {
+  display: none;
+}
+
+[hidden] {
+  display: none !important;
+}
+/*# sourceMappingURL=bootstrap-reboot.css.map */

docs/assets/vendor/bootstrap/css/bootstrap-reboot.min.css

@@ -0,0 +1,8 @@
+/*!
+ * Bootstrap Reboot v4.4.1 (https://getbootstrap.com/)
+ * Copyright 2011-2019 The Bootstrap Authors
+ * Copyright 2011-2019 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]){color:inherit;text-decoration:none}a:not([href]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}
+/*# sourceMappingURL=bootstrap-reboot.min.css.map */

docs/assets/vendor/boxicons/css/animations.css

@@ -0,0 +1,386 @@
+@-webkit-keyframes spin
+{
+    0%
+    {
+        -webkit-transform: rotate(0);
+                transform: rotate(0);
+    }
+    100%
+    {
+        -webkit-transform: rotate(359deg);
+                transform: rotate(359deg);
+    }
+}
+@keyframes spin
+{
+    0%
+    {
+        -webkit-transform: rotate(0);
+                transform: rotate(0);
+    }
+    100%
+    {
+        -webkit-transform: rotate(359deg);
+                transform: rotate(359deg);
+    }
+}
+@-webkit-keyframes burst
+{
+    0%
+    {
+        -webkit-transform: scale(1);
+                transform: scale(1);
+
+        opacity: 1;
+    }
+    90%
+    {
+        -webkit-transform: scale(1.5);
+                transform: scale(1.5);
+
+        opacity: 0;
+    }
+}
+@keyframes burst
+{
+    0%
+    {
+        -webkit-transform: scale(1);
+                transform: scale(1);
+
+        opacity: 1;
+    }
+    90%
+    {
+        -webkit-transform: scale(1.5);
+                transform: scale(1.5);
+
+        opacity: 0;
+    }
+}
+@-webkit-keyframes flashing
+{
+    0%
+    {
+        opacity: 1;
+    }
+    45%
+    {
+        opacity: 0;
+    }
+    90%
+    {
+        opacity: 1;
+    }
+}
+@keyframes flashing
+{
+    0%
+    {
+        opacity: 1;
+    }
+    45%
+    {
+        opacity: 0;
+    }
+    90%
+    {
+        opacity: 1;
+    }
+}
+@-webkit-keyframes fade-left
+{
+    0%
+    {
+        -webkit-transform: translateX(0);
+                transform: translateX(0);
+
+        opacity: 1;
+    }
+    75%
+    {
+        -webkit-transform: translateX(-20px);
+                transform: translateX(-20px);
+
+        opacity: 0;
+    }
+}
+@keyframes fade-left
+{
+    0%
+    {
+        -webkit-transform: translateX(0);
+                transform: translateX(0);
+
+        opacity: 1;
+    }
+    75%
+    {
+        -webkit-transform: translateX(-20px);
+                transform: translateX(-20px);
+
+        opacity: 0;
+    }
+}
+@-webkit-keyframes fade-right
+{
+    0%
+    {
+        -webkit-transform: translateX(0);
+                transform: translateX(0);
+
+        opacity: 1;
+    }
+    75%
+    {
+        -webkit-transform: translateX(20px);
+                transform: translateX(20px);
+
+        opacity: 0;
+    }
+}
+@keyframes fade-right
+{
+    0%
+    {
+        -webkit-transform: translateX(0);
+                transform: translateX(0);
+
+        opacity: 1;
+    }
+    75%
+    {
+        -webkit-transform: translateX(20px);
+                transform: translateX(20px);
+
+        opacity: 0;
+    }
+}
+@-webkit-keyframes fade-up
+{
+    0%
+    {
+        -webkit-transform: translateY(0);
+                transform: translateY(0);
+
+        opacity: 1;
+    }
+    75%
+    {
+        -webkit-transform: translateY(-20px);
+                transform: translateY(-20px);
+
+        opacity: 0;
+    }
+}
+@keyframes fade-up
+{
+    0%
+    {
+        -webkit-transform: translateY(0);
+                transform: translateY(0);
+
+        opacity: 1;
+    }
+    75%
+    {
+        -webkit-transform: translateY(-20px);
+                transform: translateY(-20px);
+
+        opacity: 0;
+    }
+}
+@-webkit-keyframes fade-down
+{
+    0%
+    {
+        -webkit-transform: translateY(0);
+                transform: translateY(0);
+
+        opacity: 1;
+    }
+    75%
+    {
+        -webkit-transform: translateY(20px);
+                transform: translateY(20px);
+
+        opacity: 0;
+    }
+}
+@keyframes fade-down
+{
+    0%
+    {
+        -webkit-transform: translateY(0);
+                transform: translateY(0);
+
+        opacity: 1;
+    }
+    75%
+    {
+        -webkit-transform: translateY(20px);
+                transform: translateY(20px);
+
+        opacity: 0;
+    }
+}
+@-webkit-keyframes tada
+{
+    from
+    {
+        -webkit-transform: scale3d(1, 1, 1);
+                transform: scale3d(1, 1, 1);
+    }
+
+    10%,
+    20%
+    {
+        -webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
+                transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
+    }
+
+    30%,
+    50%,
+    70%,
+    90%
+    {
+        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
+                transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
+    }
+
+    40%,
+    60%,
+    80%
+    {
+        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
+                transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
+    }
+
+    to
+    {
+        -webkit-transform: scale3d(1, 1, 1);
+                transform: scale3d(1, 1, 1);
+    }
+}
+
+@keyframes tada
+{
+    from
+    {
+        -webkit-transform: scale3d(1, 1, 1);
+                transform: scale3d(1, 1, 1);
+    }
+
+    10%,
+    20%
+    {
+        -webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
+                transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
+    }
+
+    30%,
+    50%,
+    70%,
+    90%
+    {
+        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
+                transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
+    }
+
+    40%,
+    60%,
+    80%
+    {
+        -webkit-transform: rotate3d(0, 0, 1, -10deg);
+                transform: rotate3d(0, 0, 1, -10deg);
+    }
+
+    to
+    {
+        -webkit-transform: scale3d(1, 1, 1);
+                transform: scale3d(1, 1, 1);
+    }
+}
+.bx-spin
+{
+    -webkit-animation: spin 2s linear infinite;
+            animation: spin 2s linear infinite;
+}
+.bx-spin-hover:hover
+{
+    -webkit-animation: spin 2s linear infinite;
+            animation: spin 2s linear infinite;
+}
+
+.bx-tada
+{
+    -webkit-animation: tada 1.5s ease infinite;
+            animation: tada 1.5s ease infinite;
+}
+.bx-tada-hover:hover
+{
+    -webkit-animation: tada 1.5s ease infinite;
+            animation: tada 1.5s ease infinite;
+}
+
+.bx-flashing
+{
+    -webkit-animation: flashing 1.5s infinite linear;
+            animation: flashing 1.5s infinite linear;
+}
+.bx-flashing-hover:hover
+{
+    -webkit-animation: flashing 1.5s infinite linear;
+            animation: flashing 1.5s infinite linear;
+}
+
+.bx-burst
+{
+    -webkit-animation: burst 1.5s infinite linear;
+            animation: burst 1.5s infinite linear;
+}
+.bx-burst-hover:hover
+{
+    -webkit-animation: burst 1.5s infinite linear;
+            animation: burst 1.5s infinite linear;
+}
+.bx-fade-up
+{
+    -webkit-animation: fade-up 1.5s infinite linear;
+            animation: fade-up 1.5s infinite linear;
+}
+.bx-fade-up-hover:hover
+{
+    -webkit-animation: fade-up 1.5s infinite linear;
+            animation: fade-up 1.5s infinite linear;
+}
+.bx-fade-down
+{
+    -webkit-animation: fade-down 1.5s infinite linear;
+            animation: fade-down 1.5s infinite linear;
+}
+.bx-fade-down-hover:hover
+{
+    -webkit-animation: fade-down 1.5s infinite linear;
+            animation: fade-down 1.5s infinite linear;
+}
+.bx-fade-left
+{
+    -webkit-animation: fade-left 1.5s infinite linear;
+            animation: fade-left 1.5s infinite linear;
+}
+.bx-fade-left-hover:hover
+{
+    -webkit-animation: fade-left 1.5s infinite linear;
+            animation: fade-left 1.5s infinite linear;
+}
+.bx-fade-right
+{
+    -webkit-animation: fade-right 1.5s infinite linear;
+            animation: fade-right 1.5s infinite linear;
+}
+.bx-fade-right-hover:hover
+{
+    -webkit-animation: fade-right 1.5s infinite linear;
+            animation: fade-right 1.5s infinite linear;
+}

docs/assets/vendor/boxicons/css/transformations.css

@@ -0,0 +1,30 @@
+.bx-rotate-90
+{
+    transform: rotate(90deg);
+
+    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
+}
+.bx-rotate-180
+{
+    transform: rotate(180deg);
+
+    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
+}
+.bx-rotate-270
+{
+    transform: rotate(270deg);
+
+    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
+}
+.bx-flip-horizontal
+{
+    transform: scaleX(-1);
+
+    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)';
+}
+.bx-flip-vertical
+{
+    transform: scaleY(-1);
+
+    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)';
+}

docs/assets/vendor/jquery.easing/jquery.easing.min.js

@@ -0,0 +1 @@
+(function(factory){if(typeof define==="function"&&define.amd){define(["jquery"],function($){return factory($)})}else if(typeof module==="object"&&typeof module.exports==="object"){exports=factory(require("jquery"))}else{factory(jQuery)}})(function($){$.easing.jswing=$.easing.swing;var pow=Math.pow,sqrt=Math.sqrt,sin=Math.sin,cos=Math.cos,PI=Math.PI,c1=1.70158,c2=c1*1.525,c3=c1+1,c4=2*PI/3,c5=2*PI/4.5;function bounceOut(x){var n1=7.5625,d1=2.75;if(x<1/d1){return n1*x*x}else if(x<2/d1){return n1*(x-=1.5/d1)*x+.75}else if(x<2.5/d1){return n1*(x-=2.25/d1)*x+.9375}else{return n1*(x-=2.625/d1)*x+.984375}}$.extend($.easing,{def:"easeOutQuad",swing:function(x){return $.easing[$.easing.def](x)},easeInQuad:function(x){return x*x},easeOutQuad:function(x){return 1-(1-x)*(1-x)},easeInOutQuad:function(x){return x<.5?2*x*x:1-pow(-2*x+2,2)/2},easeInCubic:function(x){return x*x*x},easeOutCubic:function(x){return 1-pow(1-x,3)},easeInOutCubic:function(x){return x<.5?4*x*x*x:1-pow(-2*x+2,3)/2},easeInQuart:function(x){return x*x*x*x},easeOutQuart:function(x){return 1-pow(1-x,4)},easeInOutQuart:function(x){return x<.5?8*x*x*x*x:1-pow(-2*x+2,4)/2},easeInQuint:function(x){return x*x*x*x*x},easeOutQuint:function(x){return 1-pow(1-x,5)},easeInOutQuint:function(x){return x<.5?16*x*x*x*x*x:1-pow(-2*x+2,5)/2},easeInSine:function(x){return 1-cos(x*PI/2)},easeOutSine:function(x){return sin(x*PI/2)},easeInOutSine:function(x){return-(cos(PI*x)-1)/2},easeInExpo:function(x){return x===0?0:pow(2,10*x-10)},easeOutExpo:function(x){return x===1?1:1-pow(2,-10*x)},easeInOutExpo:function(x){return x===0?0:x===1?1:x<.5?pow(2,20*x-10)/2:(2-pow(2,-20*x+10))/2},easeInCirc:function(x){return 1-sqrt(1-pow(x,2))},easeOutCirc:function(x){return sqrt(1-pow(x-1,2))},easeInOutCirc:function(x){return x<.5?(1-sqrt(1-pow(2*x,2)))/2:(sqrt(1-pow(-2*x+2,2))+1)/2},easeInElastic:function(x){return x===0?0:x===1?1:-pow(2,10*x-10)*sin((x*10-10.75)*c4)},easeOutElastic:function(x){return x===0?0:x===1?1:pow(2,-10*x)*sin((x*10-.75)*c4)+1},easeInOutElastic:function(x){return x===0?0:x===1?1:x<.5?-(pow(2,20*x-10)*sin((20*x-11.125)*c5))/2:pow(2,-20*x+10)*sin((20*x-11.125)*c5)/2+1},easeInBack:function(x){return c3*x*x*x-c1*x*x},easeOutBack:function(x){return 1+c3*pow(x-1,3)+c1*pow(x-1,2)},easeInOutBack:function(x){return x<.5?pow(2*x,2)*((c2+1)*2*x-c2)/2:(pow(2*x-2,2)*((c2+1)*(x*2-2)+c2)+2)/2},easeInBounce:function(x){return 1-bounceOut(1-x)},easeOutBounce:bounceOut,easeInOutBounce:function(x){return x<.5?(1-bounceOut(1-2*x))/2:(1+bounceOut(2*x-1))/2}})});

docs/assets/vendor/owl.carousel/LICENSE

@@ -0,0 +1,23 @@
+Copyright (c) 2014 Owl
+Modified work Copyright 2016-2018 David Deutsch
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.

docs/assets/vendor/owl.carousel/README.md

@@ -0,0 +1,122 @@
+# Owl Carousel 2
+
+Touch enabled [jQuery](https://jquery.com/) plugin that lets you create a beautiful, responsive carousel slider. **To get started, check out https://owlcarousel2.github.io/OwlCarousel2/.**
+
+**Notice:** The old Owl Carousel site (owlgraphic [dot] com) is no longer in use. Please delete all references to this in bookmarks and your own products' documentation as it's being used for malicious purposes.
+
+## Quick start
+
+### Install
+
+This package can be installed with:
+
+- [npm](https://www.npmjs.com/package/owl.carousel): `npm install --save owl.carousel` or `yarn add owl.carousel jquery`
+- [bower](http://bower.io/search/?q=owl.carousel): `bower install --save owl.carousel`
+
+Or download the [latest release](https://github.com/OwlCarousel2/OwlCarousel2/releases).
+
+### Load
+
+#### Webpack
+
+Add jQuery via the "webpack.ProvidePlugin" to your webpack configuration:
+    
+    const webpack = require('webpack');
+    
+    //...
+    plugins: [
+        new webpack.ProvidePlugin({
+          $: 'jquery',
+          jQuery: 'jquery',
+          'window.jQuery': 'jquery'
+        }),
+    ],
+    //...
+
+Load the required stylesheet and JS:
+
+```js
+import 'owl.carousel/dist/assets/owl.carousel.css';
+import 'owl.carousel';
+```
+
+#### Static HTML
+
+Put the required stylesheet at the [top](https://developer.yahoo.com/performance/rules.html#css_top) of your markup:
+
+```html
+<link rel="stylesheet" href="/node_modules/owl.carousel/dist/assets/owl.carousel.min.css" />
+```
+
+```html
+<link rel="stylesheet" href="/bower_components/owl.carousel/dist/assets/owl.carousel.min.css" />
+```
+
+**NOTE:** If you want to use the default navigation styles, you will also need to include `owl.theme.default.css`.
+
+
+Put the script at the [bottom](https://developer.yahoo.com/performance/rules.html#js_bottom) of your markup right after jQuery:
+
+```html
+<script src="/node_modules/jquery/dist/jquery.js"></script>
+<script src="/node_modules/owl.carousel/dist/owl.carousel.min.js"></script>
+```
+
+```html
+<script src="/bower_components/jquery/dist/jquery.js"></script>
+<script src="/bower_components/owl.carousel/dist/owl.carousel.min.js"></script>
+```
+
+### Usage
+
+Wrap your items (`div`, `a`, `img`, `span`, `li` etc.) with a container element (`div`, `ul` etc.). Only the class `owl-carousel` is mandatory to apply proper styles:
+
+```html
+<div class="owl-carousel owl-theme">
+  <div> Your Content </div>
+  <div> Your Content </div>
+  <div> Your Content </div>
+  <div> Your Content </div>
+  <div> Your Content </div>
+  <div> Your Content </div>
+  <div> Your Content </div>
+</div>
+```
+**NOTE:** The `owl-theme` class is optional, but without it, you will need to style navigation features on your own.
+
+
+Call the [plugin](https://learn.jquery.com/plugins/) function and your carousel is ready.
+
+```javascript
+$(document).ready(function(){
+  $('.owl-carousel').owlCarousel();
+});
+```
+
+## Documentation
+
+The documentation, included in this repo in the root directory, is built with [Assemble](http://assemble.io/) and publicly available at https://owlcarousel2.github.io/OwlCarousel2/. The documentation may also be run locally.
+
+## Building
+
+This package comes with [Grunt](http://gruntjs.com/) and [Bower](http://bower.io/). The following tasks are available:
+
+  * `default` compiles the CSS and JS into `/dist` and builds the doc.
+  * `dist` compiles the CSS and JS into `/dist` only.
+  * `watch` watches source files and builds them automatically whenever you save.
+  * `test` runs [JSHint](http://www.jshint.com/) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/).
+
+To define which plugins are build into the distribution just edit `/_config.json` to fit your needs.
+
+## Contributing
+
+Please read [CONTRIBUTING.md](CONTRIBUTING.md).
+
+## Roadmap
+
+Please make sure to check out our [Roadmap Discussion](https://github.com/OwlCarousel2/OwlCarousel2/issues/1756).
+
+
+## License
+
+The code and the documentation are released under the [MIT License](LICENSE).

docs/assets/vendor/owl.carousel/assets/owl.carousel.css

@@ -0,0 +1,186 @@
+/**
+ * Owl Carousel v2.3.4
+ * Copyright 2013-2018 David Deutsch
+ * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
+ */
+/*
+ *  Owl Carousel - Core
+ */
+.owl-carousel {
+  display: none;
+  width: 100%;
+  -webkit-tap-highlight-color: transparent;
+  /* position relative and z-index fix webkit rendering fonts issue */
+  position: relative;
+  z-index: 1; }
+  .owl-carousel .owl-stage {
+    position: relative;
+    -ms-touch-action: pan-Y;
+    touch-action: manipulation;
+    -moz-backface-visibility: hidden;
+    /* fix firefox animation glitch */ }
+  .owl-carousel .owl-stage:after {
+    content: ".";
+    display: block;
+    clear: both;
+    visibility: hidden;
+    line-height: 0;
+    height: 0; }
+  .owl-carousel .owl-stage-outer {
+    position: relative;
+    overflow: hidden;
+    /* fix for flashing background */
+    -webkit-transform: translate3d(0px, 0px, 0px); }
+  .owl-carousel .owl-wrapper,
+  .owl-carousel .owl-item {
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -ms-backface-visibility: hidden;
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0); }
+  .owl-carousel .owl-item {
+    position: relative;
+    min-height: 1px;
+    float: left;
+    -webkit-backface-visibility: hidden;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none; }
+  .owl-carousel .owl-item img {
+    display: block;
+    width: 100%; }
+  .owl-carousel .owl-nav.disabled,
+  .owl-carousel .owl-dots.disabled {
+    display: none; }
+  .owl-carousel .owl-nav .owl-prev,
+  .owl-carousel .owl-nav .owl-next,
+  .owl-carousel .owl-dot {
+    cursor: pointer;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none; }
+  .owl-carousel .owl-nav button.owl-prev,
+  .owl-carousel .owl-nav button.owl-next,
+  .owl-carousel button.owl-dot {
+    background: none;
+    color: inherit;
+    border: none;
+    padding: 0 !important;
+    font: inherit; }
+  .owl-carousel.owl-loaded {
+    display: block; }
+  .owl-carousel.owl-loading {
+    opacity: 0;
+    display: block; }
+  .owl-carousel.owl-hidden {
+    opacity: 0; }
+  .owl-carousel.owl-refresh .owl-item {
+    visibility: hidden; }
+  .owl-carousel.owl-drag .owl-item {
+    -ms-touch-action: pan-y;
+        touch-action: pan-y;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none; }
+  .owl-carousel.owl-grab {
+    cursor: move;
+    cursor: grab; }
+  .owl-carousel.owl-rtl {
+    direction: rtl; }
+  .owl-carousel.owl-rtl .owl-item {
+    float: right; }
+
+/* No Js */
+.no-js .owl-carousel {
+  display: block; }
+
+/*
+ *  Owl Carousel - Animate Plugin
+ */
+.owl-carousel .animated {
+  animation-duration: 1000ms;
+  animation-fill-mode: both; }
+
+.owl-carousel .owl-animated-in {
+  z-index: 0; }
+
+.owl-carousel .owl-animated-out {
+  z-index: 1; }
+
+.owl-carousel .fadeOut {
+  animation-name: fadeOut; }
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1; }
+  100% {
+    opacity: 0; } }
+
+/*
+ * 	Owl Carousel - Auto Height Plugin
+ */
+.owl-height {
+  transition: height 500ms ease-in-out; }
+
+/*
+ * 	Owl Carousel - Lazy Load Plugin
+ */
+.owl-carousel .owl-item {
+  /**
+			This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong
+			calculation of the height of the owl-item that breaks page layouts
+		 */ }
+  .owl-carousel .owl-item .owl-lazy {
+    opacity: 0;
+    transition: opacity 400ms ease; }
+  .owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) {
+    max-height: 0; }
+  .owl-carousel .owl-item img.owl-lazy {
+    transform-style: preserve-3d; }
+
+/*
+ * 	Owl Carousel - Video Plugin
+ */
+.owl-carousel .owl-video-wrapper {
+  position: relative;
+  height: 100%;
+  background: #000; }
+
+.owl-carousel .owl-video-play-icon {
+  position: absolute;
+  height: 80px;
+  width: 80px;
+  left: 50%;
+  top: 50%;
+  margin-left: -40px;
+  margin-top: -40px;
+  background: url("owl.video.play.png") no-repeat;
+  cursor: pointer;
+  z-index: 1;
+  -webkit-backface-visibility: hidden;
+  transition: transform 100ms ease; }
+
+.owl-carousel .owl-video-play-icon:hover {
+  -ms-transform: scale(1.3, 1.3);
+      transform: scale(1.3, 1.3); }
+
+.owl-carousel .owl-video-playing .owl-video-tn,
+.owl-carousel .owl-video-playing .owl-video-play-icon {
+  display: none; }
+
+.owl-carousel .owl-video-tn {
+  opacity: 0;
+  height: 100%;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  transition: opacity 400ms ease; }
+
+.owl-carousel .owl-video-frame {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  width: 100%; }

docs/assets/vendor/owl.carousel/assets/owl.carousel.min.css

@@ -0,0 +1,6 @@
+/**
+ * Owl Carousel v2.3.4
+ * Copyright 2013-2018 David Deutsch
+ * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
+ */
+.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}

docs/assets/vendor/owl.carousel/assets/owl.theme.default.css

@@ -0,0 +1,50 @@
+/**
+ * Owl Carousel v2.3.4
+ * Copyright 2013-2018 David Deutsch
+ * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
+ */
+/*
+ * 	Default theme - Owl Carousel CSS File
+ */
+.owl-theme .owl-nav {
+  margin-top: 10px;
+  text-align: center;
+  -webkit-tap-highlight-color: transparent; }
+  .owl-theme .owl-nav [class*='owl-'] {
+    color: #FFF;
+    font-size: 14px;
+    margin: 5px;
+    padding: 4px 7px;
+    background: #D6D6D6;
+    display: inline-block;
+    cursor: pointer;
+    border-radius: 3px; }
+    .owl-theme .owl-nav [class*='owl-']:hover {
+      background: #869791;
+      color: #FFF;
+      text-decoration: none; }
+  .owl-theme .owl-nav .disabled {
+    opacity: 0.5;
+    cursor: default; }
+
+.owl-theme .owl-nav.disabled + .owl-dots {
+  margin-top: 10px; }
+
+.owl-theme .owl-dots {
+  text-align: center;
+  -webkit-tap-highlight-color: transparent; }
+  .owl-theme .owl-dots .owl-dot {
+    display: inline-block;
+    zoom: 1;
+    *display: inline; }
+    .owl-theme .owl-dots .owl-dot span {
+      width: 10px;
+      height: 10px;
+      margin: 5px 7px;
+      background: #D6D6D6;
+      display: block;
+      -webkit-backface-visibility: visible;
+      transition: opacity 200ms ease;
+      border-radius: 30px; }
+    .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
+      background: #869791; }

docs/assets/vendor/owl.carousel/assets/owl.theme.default.min.css

@@ -0,0 +1,6 @@
+/**
+ * Owl Carousel v2.3.4
+ * Copyright 2013-2018 David Deutsch
+ * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
+ */
+.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}

docs/assets/vendor/owl.carousel/assets/owl.theme.green.css

@@ -0,0 +1,50 @@
+/**
+ * Owl Carousel v2.3.4
+ * Copyright 2013-2018 David Deutsch
+ * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
+ */
+/*
+ * 	Green theme - Owl Carousel CSS File
+ */
+.owl-theme .owl-nav {
+  margin-top: 10px;
+  text-align: center;
+  -webkit-tap-highlight-color: transparent; }
+  .owl-theme .owl-nav [class*='owl-'] {
+    color: #FFF;
+    font-size: 14px;
+    margin: 5px;
+    padding: 4px 7px;
+    background: #D6D6D6;
+    display: inline-block;
+    cursor: pointer;
+    border-radius: 3px; }
+    .owl-theme .owl-nav [class*='owl-']:hover {
+      background: #4DC7A0;
+      color: #FFF;
+      text-decoration: none; }
+  .owl-theme .owl-nav .disabled {
+    opacity: 0.5;
+    cursor: default; }
+
+.owl-theme .owl-nav.disabled + .owl-dots {
+  margin-top: 10px; }
+
+.owl-theme .owl-dots {
+  text-align: center;
+  -webkit-tap-highlight-color: transparent; }
+  .owl-theme .owl-dots .owl-dot {
+    display: inline-block;
+    zoom: 1;
+    *display: inline; }
+    .owl-theme .owl-dots .owl-dot span {
+      width: 10px;
+      height: 10px;
+      margin: 5px 7px;
+      background: #D6D6D6;
+      display: block;
+      -webkit-backface-visibility: visible;
+      transition: opacity 200ms ease;
+      border-radius: 30px; }
+    .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
+      background: #4DC7A0; }

docs/assets/vendor/owl.carousel/assets/owl.theme.green.min.css

@@ -0,0 +1,6 @@
+/**
+ * Owl Carousel v2.3.4
+ * Copyright 2013-2018 David Deutsch
+ * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
+ */
+.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#4DC7A0;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#4DC7A0}

docs/assets/vendor/venobox/venobox.js

@@ -0,0 +1,763 @@
+/*
+ * VenoBox - jQuery Plugin
+ * version: 1.8.6
+ * @requires jQuery >= 1.7.0
+ *
+ * Examples at http://veno.es/venobox/
+ * License: MIT License
+ * License URI: https://github.com/nicolafranchini/VenoBox/blob/master/LICENSE
+ * Copyright 2013-2019 Nicola Franchini - @nicolafranchini
+ *
+ */
+
+/* global jQuery */
+
+(function($){
+    "use strict";
+    var autoplay, bgcolor, blocknum, blocktitle, border, core, container, content, dest, extraCss,
+        framewidth, frameheight, gallItems, infinigall, items, keyNavigationDisabled, margine, numeratio,
+        overlayColor, overlay, title, thisgall, thenext, theprev, nextok, prevok, preloader, $preloader, navigation,
+        obj, gallIndex, startouch, vbheader, images, startY, startX, endY, endX, diff, diffX, diffY, threshold;
+
+    $.fn.extend({
+        //plugin name - venobox
+        venobox: function(options) {
+            var plugin = this;
+            // default options
+            var defaults = {
+                arrowsColor : '#B6B6B6',
+                autoplay : false, // same as data-autoplay - thanks @codibit
+                bgcolor: '#fff',
+                border: '0',
+                closeBackground : '#161617',
+                closeColor : "#d2d2d2",
+                framewidth: '',
+                frameheight: '',
+                gallItems: false,
+                infinigall: false,
+                htmlClose : '×',
+                htmlNext : '<span>Next</span>',
+                htmlPrev : '<span>Prev</span>',
+                numeratio: false,
+                numerationBackground : '#161617',
+                numerationColor : '#d2d2d2',
+                numerationPosition : 'top', // 'top' || 'bottom'
+                overlayClose: true, // disable overlay click-close - thanx @martybalandis
+                overlayColor : 'rgba(23,23,23,0.85)',
+                spinner : 'double-bounce', // available: 'rotating-plane' | 'double-bounce' | 'wave' | 'wandering-cubes' | 'spinner-pulse' | 'chasing-dots' | 'three-bounce' | 'circle' | 'cube-grid' | 'fading-circle' | 'folding-cube'
+                spinColor : '#d2d2d2',
+                titleattr: 'title', // specific attribute to get a title (e.g. [data-title]) - thanx @mendezcode
+                titleBackground: '#161617',
+                titleColor: '#d2d2d2',
+                titlePosition : 'top', // 'top' || 'bottom'
+                cb_pre_open: function(){ return true; }, // Callbacks - thanx @garyee
+                cb_post_open: function(){},
+                cb_pre_close: function(){ return true; },
+                cb_post_close: function(){},
+                cb_post_resize: function(){},
+                cb_after_nav: function(){},
+                cb_content_loaded: function(){},
+                cb_init: function(){}
+            };
+
+            var option = $.extend(defaults, options);
+
+            // callback plugin initialization
+            option.cb_init(plugin);
+
+            return this.each(function() {
+
+                obj = $(this);
+
+                // Prevent double initialization - thanx @matthistuff
+                if (obj.data('venobox')) {
+                  return true;
+                }
+
+                // method to be used outside the plugin
+                plugin.VBclose = function() {
+                    closeVbox();
+                };
+                obj.addClass('vbox-item');
+                obj.data('framewidth', option.framewidth);
+                obj.data('frameheight', option.frameheight);
+                obj.data('border', option.border);
+                obj.data('bgcolor', option.bgcolor);
+                obj.data('numeratio', option.numeratio);
+                obj.data('gallItems', option.gallItems);
+                obj.data('infinigall', option.infinigall);
+                obj.data('overlaycolor', option.overlayColor);
+                obj.data('titleattr', option.titleattr);
+
+                obj.data('venobox', true);
+
+                obj.on('click', function(e){
+
+                    e.preventDefault();
+                    obj = $(this);
+
+                    // callback plugin initialization
+                    var cb_pre_open = option.cb_pre_open(obj);
+
+                    if (cb_pre_open === false) {
+                      return false;
+                    }
+
+                    // methods to be used outside the plugin
+                    plugin.VBnext = function() {
+                        navigateGall(thenext);
+                    };
+                    plugin.VBprev = function() {
+                        navigateGall(theprev);
+                    };
+
+                    overlayColor = obj.data('overlay') || obj.data('overlaycolor');
+
+                    framewidth = obj.data('framewidth');
+                    frameheight = obj.data('frameheight');
+                    // set data-autoplay="true" for vimeo and youtube videos - thanx @zehfernandes
+                    autoplay = obj.data('autoplay') || option.autoplay;
+                    border = obj.data('border');
+                    bgcolor = obj.data('bgcolor');
+                    nextok = false;
+                    prevok = false;
+                    keyNavigationDisabled = false;
+
+                    // set a different url to be loaded using data-href="" - thanx @pixeline
+                    dest = obj.data('href') || obj.attr('href');
+                    extraCss = obj.data( 'css' ) || '';
+                    title = obj.attr(obj.data('titleattr')) || '';
+
+                    preloader = '<div class="vbox-preloader">';
+
+                    switch (option.spinner) {
+
+                        case 'rotating-plane':
+                            preloader += '<div class="sk-rotating-plane"></div>';
+                            break;
+                        case 'double-bounce':
+                            preloader += '<div class="sk-double-bounce">'+
+                            '<div class="sk-child sk-double-bounce1"></div>'+
+                            '<div class="sk-child sk-double-bounce2"></div>'+
+                            '</div>';
+                            break;
+                        case 'wave':
+                            preloader += '<div class="sk-wave">'+
+                            '<div class="sk-rect sk-rect1"></div>'+
+                            '<div class="sk-rect sk-rect2"></div>'+
+                            '<div class="sk-rect sk-rect3"></div>'+
+                            '<div class="sk-rect sk-rect4"></div>'+
+                            '<div class="sk-rect sk-rect5"></div>'+
+                            '</div>';
+                            break;
+                        case 'wandering-cubes':
+                            preloader += '<div class="sk-wandering-cubes">'+
+                            '<div class="sk-cube sk-cube1"></div>'+
+                            '<div class="sk-cube sk-cube2"></div>'+
+                            '</div>';
+                            break;
+                          case 'spinner-pulse':
+                            preloader += '<div class="sk-spinner sk-spinner-pulse"></div>';
+                            break;
+                        case 'chasing-dots':
+                            preloader += '<div class="sk-chasing-dots">'+
+                            '<div class="sk-child sk-dot1"></div>'+
+                            '<div class="sk-child sk-dot2"></div>'+
+                            '</div>';
+                            break;
+                        case 'three-bounce':
+                            preloader += '<div class="sk-three-bounce">'+
+                            '<div class="sk-child sk-bounce1"></div>'+
+                            '<div class="sk-child sk-bounce2"></div>'+
+                            '<div class="sk-child sk-bounce3"></div>'+
+                            '</div>';
+                            break;
+                        case 'circle':
+                            preloader += '<div class="sk-circle">'+
+                            '<div class="sk-circle1 sk-child"></div>'+
+                            '<div class="sk-circle2 sk-child"></div>'+
+                            '<div class="sk-circle3 sk-child"></div>'+
+                            '<div class="sk-circle4 sk-child"></div>'+
+                            '<div class="sk-circle5 sk-child"></div>'+
+                            '<div class="sk-circle6 sk-child"></div>'+
+                            '<div class="sk-circle7 sk-child"></div>'+
+                            '<div class="sk-circle8 sk-child"></div>'+
+                            '<div class="sk-circle9 sk-child"></div>'+
+                            '<div class="sk-circle10 sk-child"></div>'+
+                            '<div class="sk-circle11 sk-child"></div>'+
+                            '<div class="sk-circle12 sk-child"></div>'+
+                            '</div>';
+                            break;
+                        case 'cube-grid':
+                            preloader += '<div class="sk-cube-grid">'+
+                            '<div class="sk-cube sk-cube1"></div>'+
+                            '<div class="sk-cube sk-cube2"></div>'+
+                            '<div class="sk-cube sk-cube3"></div>'+
+                            '<div class="sk-cube sk-cube4"></div>'+
+                            '<div class="sk-cube sk-cube5"></div>'+
+                            '<div class="sk-cube sk-cube6"></div>'+
+                            '<div class="sk-cube sk-cube7"></div>'+
+                            '<div class="sk-cube sk-cube8"></div>'+
+                            '<div class="sk-cube sk-cube9"></div>'+
+                            '</div>';
+                            break;
+                        case 'fading-circle':
+                            preloader += '<div class="sk-fading-circle">'+
+                            '<div class="sk-circle1 sk-circle"></div>'+
+                            '<div class="sk-circle2 sk-circle"></div>'+
+                            '<div class="sk-circle3 sk-circle"></div>'+
+                            '<div class="sk-circle4 sk-circle"></div>'+
+                            '<div class="sk-circle5 sk-circle"></div>'+
+                            '<div class="sk-circle6 sk-circle"></div>'+
+                            '<div class="sk-circle7 sk-circle"></div>'+
+                            '<div class="sk-circle8 sk-circle"></div>'+
+                            '<div class="sk-circle9 sk-circle"></div>'+
+                            '<div class="sk-circle10 sk-circle"></div>'+
+                            '<div class="sk-circle11 sk-circle"></div>'+
+                            '<div class="sk-circle12 sk-circle"></div>'+
+                            '</div>';
+                            break;
+                        case 'folding-cube':
+                            preloader += '<div class="sk-folding-cube">'+
+                            '<div class="sk-cube1 sk-cube"></div>'+
+                            '<div class="sk-cube2 sk-cube"></div>'+
+                            '<div class="sk-cube4 sk-cube"></div>'+
+                            '<div class="sk-cube3 sk-cube"></div>'+
+                            '</div>';
+                            break;
+                    }
+                    preloader += '</div>';
+
+                    navigation = '<a class="vbox-next">' + option.htmlNext + '</a><a class="vbox-prev">' + option.htmlPrev + '</a>';
+                    vbheader = '<div class="vbox-title"></div><div class="vbox-num">0/0</div><div class="vbox-close">' + option.htmlClose + '</div>';
+
+                    core = '<div class="vbox-overlay ' + extraCss + '" style="background:'+ overlayColor +'">'+
+                    preloader + '<div class="vbox-container"><div class="vbox-content"></div></div>' + vbheader + navigation + '</div>';
+
+                    $('body').append(core).addClass('vbox-open');
+
+                    $('.vbox-preloader div:not(.sk-circle) .sk-child, .vbox-preloader .sk-rotating-plane, .vbox-preloader .sk-rect, .vbox-preloader div:not(.sk-folding-cube) .sk-cube, .vbox-preloader .sk-spinner-pulse').css('background-color', option.spinColor);
+
+                    overlay = $('.vbox-overlay');
+                    container = $('.vbox-container');
+                    content = $('.vbox-content');
+                    blocknum = $('.vbox-num');
+                    blocktitle = $('.vbox-title');
+                    $preloader = $('.vbox-preloader');
+
+                    $preloader.show();
+
+                    blocktitle.css(option.titlePosition, '-1px');
+                    blocktitle.css({
+                      'color' : option.titleColor,
+                      'background-color' : option.titleBackground
+                    });
+
+                    $('.vbox-close').css({
+                      'color' : option.closeColor,
+                      'background-color' : option.closeBackground
+                    });
+
+                    $('.vbox-num').css(option.numerationPosition, '-1px');
+                    $('.vbox-num').css({
+                      'color' : option.numerationColor,
+                      'background-color' : option.numerationBackground
+                    });
+
+                    $('.vbox-next span, .vbox-prev span').css({
+                      'border-top-color' : option.arrowsColor,
+                      'border-right-color' : option.arrowsColor
+                    });
+
+                    content.html('');
+                    content.css('opacity', '0');
+                    overlay.css('opacity', '0');
+
+                    checknav();
+
+                    // fade in overlay
+                    overlay.animate({opacity:1}, 250, function(){
+
+                        if (obj.data('vbtype') == 'iframe') {
+                          loadIframe();
+                        } else if (obj.data('vbtype') == 'inline') {
+                          loadInline();
+                        } else if (obj.data('vbtype') == 'ajax') {
+                          loadAjax();
+                        } else if (obj.data('vbtype') == 'video') {
+                          loadVid(autoplay);
+                        } else {
+                          content.html('<img src="'+dest+'">');
+                          preloadFirst();
+                        }
+                        option.cb_post_open(obj, gallIndex, thenext, theprev);
+                    });
+
+                    /* -------- KEYBOARD ACTIONS -------- */
+                    $('body').keydown(keyboardHandler);
+
+                    /* -------- PREVGALL -------- */
+                    $('.vbox-prev').on('click', function(){
+                        navigateGall(theprev);
+                    });
+                    /* -------- NEXTGALL -------- */
+                    $('.vbox-next').on('click', function(){
+                        navigateGall(thenext);
+                    });
+
+                    return false;
+
+                }); // click
+
+                /* -------- CHECK NEXT / PREV -------- */
+                function checknav(){
+
+                    thisgall = obj.data('gall');
+                    numeratio = obj.data('numeratio');
+                    gallItems = obj.data('gallItems');
+                    infinigall = obj.data('infinigall');
+
+                    if (gallItems) {
+                        items = gallItems;
+                    } else {
+                        items = $('.vbox-item[data-gall="' + thisgall + '"]');
+                    }
+
+                    thenext = items.eq( items.index(obj) + 1 );
+                    theprev = items.eq( items.index(obj) - 1 );
+
+                    if (!thenext.length && infinigall === true) {
+                      thenext = items.eq(0);
+                    }
+
+                    // update gall numeration
+                    if (items.length >= 1) {
+                      gallIndex = items.index(obj)+1;
+                      blocknum.html(gallIndex + ' / ' + items.length);
+                    } else {
+                      gallIndex = 1;
+                    }
+                    if (numeratio === true) {
+                      blocknum.show();
+                    } else {
+                      blocknum.hide();
+                    }
+
+                    // update title
+                    if (title !== '') {
+                      blocktitle.show();
+                    } else {
+                      blocktitle.hide();
+                    }
+
+                    // update navigation arrows
+                    if (!thenext.length && infinigall !== true) {
+                      $('.vbox-next').css('display', 'none');
+                      nextok = false;
+                    } else {
+                      $('.vbox-next').css('display', 'block');
+                      nextok = true;
+                    }
+
+                    if (items.index(obj) > 0 || infinigall === true) {
+                      $('.vbox-prev').css('display', 'block');
+                      prevok = true;
+                    } else {
+                      $('.vbox-prev').css('display', 'none');
+                      prevok = false;
+                    }
+                    // activate swipe
+                    if (prevok === true || nextok === true) {
+                      content.on(TouchMouseEvent.DOWN, onDownEvent);
+                      content.on(TouchMouseEvent.MOVE, onMoveEvent);
+                      content.on(TouchMouseEvent.UP, onUpEvent);
+                    }
+                }
+
+                /* -------- gallery navigation -------- */
+                function navigateGall(destination) {
+
+                    if (destination.length < 1) {
+                      return false;
+                    }
+                    if (keyNavigationDisabled) {
+                      return false;
+                    }
+                    keyNavigationDisabled = true;
+
+                    overlayColor = destination.data('overlay') || destination.data('overlaycolor');
+
+                    framewidth = destination.data('framewidth');
+                    frameheight = destination.data('frameheight');
+                    border = destination.data('border');
+                    bgcolor = destination.data('bgcolor');
+                    dest = destination.data('href') || destination.attr('href');
+
+                    autoplay = destination.data('autoplay');
+
+                    title = (destination.data('titleattr') && destination.attr(destination.data('titleattr'))) || '';
+
+                    // swipe out item
+                    if (destination === theprev) {
+                      content.addClass('vbox-animated').addClass('swipe-right');
+                    }
+                    if (destination === thenext) {
+                      content.addClass('vbox-animated').addClass('swipe-left');
+                    }
+
+                    $preloader.show();
+
+                    content.animate({
+                      opacity : 0,
+                    }, 500, function(){
+
+                      overlay.css('background',overlayColor);
+
+                      content
+                      .removeClass('vbox-animated')
+                      .removeClass('swipe-left')
+                      .removeClass('swipe-right')
+                      .css({'margin-left': 0,'margin-right': 0});
+
+                      if (destination.data('vbtype') == 'iframe') {
+                        loadIframe();
+                      } else if (destination.data('vbtype') == 'inline') {
+                        loadInline();
+                      } else if (destination.data('vbtype') == 'ajax') {
+                        loadAjax();
+                      } else if (destination.data('vbtype') == 'video') {
+                        loadVid(autoplay);
+                      } else {
+                        content.html('<img src="'+dest+'">');
+                        preloadFirst();
+                      }
+                      obj = destination;
+                      checknav();
+                      keyNavigationDisabled = false;
+                      option.cb_after_nav(obj, gallIndex, thenext, theprev);
+                    });
+                }
+
+                /* -------- KEYBOARD HANDLER -------- */
+                function keyboardHandler(e) {
+                    if (e.keyCode === 27) { // esc
+                      closeVbox();
+                    }
+
+                    if (e.keyCode == 37 && prevok === true) { // left
+                      navigateGall(theprev);
+                    }
+
+                    if (e.keyCode == 39 && nextok === true) { // right
+                      navigateGall(thenext);
+                    }
+                }
+
+                /* -------- CLOSE VBOX -------- */
+                function closeVbox(){
+
+                    var cb_pre_close = option.cb_pre_close(obj, gallIndex, thenext, theprev);
+
+                    if (cb_pre_close === false) {
+                      return false;
+                    }
+
+                    $('body').off('keydown', keyboardHandler).removeClass('vbox-open');
+
+                    obj.focus();
+
+                    overlay.animate({opacity:0}, 500, function(){
+                      overlay.remove();
+                      keyNavigationDisabled = false;
+                      option.cb_post_close();
+                    });
+                }
+
+                /* -------- CLOSE CLICK -------- */
+                var closeclickclass = '.vbox-overlay';
+                if(!option.overlayClose){
+                    closeclickclass = '.vbox-close'; // close only on X
+                }
+
+                $('body').on('click touchstart', closeclickclass, function(e){
+                    if ($(e.target).is('.vbox-overlay') ||
+						$(e.target).is('.vbox-content') ||
+						$(e.target).is('.vbox-close') ||
+						$(e.target).is('.vbox-preloader') ||
+						$(e.target).is('.vbox-container')
+                    ) {
+                        closeVbox();
+                    }
+                });
+
+                startX = 0;
+                endX = 0;
+
+                diff = 0;
+                threshold = 50;
+                startouch = false;
+
+                function onDownEvent(e){
+                    content.addClass('vbox-animated');
+                    startY = endY = e.pageY;
+                    startX = endX = e.pageX;
+                    startouch = true;
+                }
+
+                function onMoveEvent(e){
+                    if (startouch === true) {
+                        endX = e.pageX;
+                        endY = e.pageY;
+
+                        diffX = endX - startX;
+                        diffY = endY - startY;
+
+                        var absdiffX = Math.abs(diffX);
+                        var absdiffY = Math.abs(diffY);
+
+                        if ((absdiffX > absdiffY) && (absdiffX <= 100)) {
+                            e.preventDefault();
+                            content.css('margin-left', diffX);
+                        }
+                    }
+                }
+
+                function onUpEvent(e){
+                    if (startouch === true) {
+                        startouch = false;
+                        var subject = obj;
+                        var change = false;
+                        diff = endX - startX;
+
+                        if (diff < 0 && nextok === true) {
+                            subject = thenext;
+                            change = true;
+                        }
+                        if (diff > 0 && prevok === true) {
+                            subject = theprev;
+                            change = true;
+                        }
+
+                        if (Math.abs(diff) >= threshold && change === true) {
+                            navigateGall(subject);
+                        } else {
+                            content.css({'margin-left': 0,'margin-right': 0});
+                        }
+                    }
+                }
+
+                /* == GLOBAL DECLERATIONS == */
+                var TouchMouseEvent = {
+                    DOWN: "touchmousedown",
+                    UP: "touchmouseup",
+                    MOVE: "touchmousemove"
+                };
+
+                /* == EVENT LISTENERS == */
+                var onMouseEvent = function(event) {
+                    var type;
+                    switch (event.type) {
+                        case "mousedown": type = TouchMouseEvent.DOWN; break;
+                        case "mouseup":   type = TouchMouseEvent.UP;   break;
+                        case "mouseout":   type = TouchMouseEvent.UP;   break;
+                        case "mousemove": type = TouchMouseEvent.MOVE; break;
+                        default:
+                            return;
+                    }
+                    var touchMouseEvent = normalizeEvent(type, event, event.pageX, event.pageY);
+                    $(event.target).trigger(touchMouseEvent);
+                };
+
+                var onTouchEvent = function(event) {
+                    var type;
+                    switch (event.type) {
+                        case "touchstart": type = TouchMouseEvent.DOWN; break;
+                        case "touchend":   type = TouchMouseEvent.UP;   break;
+                        case "touchmove":  type = TouchMouseEvent.MOVE; break;
+                        default:
+                            return;
+                    }
+
+                    var touch = event.originalEvent.touches[0];
+                    var touchMouseEvent;
+
+                    if (type == TouchMouseEvent.UP) {
+                         touchMouseEvent = normalizeEvent(type, event, null, null);
+                    } else {
+                        touchMouseEvent = normalizeEvent(type, event, touch.pageX, touch.pageY);
+                    }
+                    $(event.target).trigger(touchMouseEvent);
+                };
+
+                /* == NORMALIZE == */
+                var normalizeEvent = function(type, original, x, y) {
+                    return $.Event(type, {
+                        pageX: x,
+                        pageY: y,
+                        originalEvent: original
+                    });
+                };
+
+                /* == LISTEN TO ORIGINAL EVENT == */
+                if ("ontouchstart" in window) {
+                    $(document).on("touchstart", onTouchEvent);
+                    $(document).on("touchmove", onTouchEvent);
+                    $(document).on("touchend", onTouchEvent);
+                } else {
+                    $(document).on("mousedown", onMouseEvent);
+                    $(document).on("mouseup", onMouseEvent);
+                    $(document).on("mouseout", onMouseEvent);
+                    $(document).on("mousemove", onMouseEvent);
+                }
+
+                /* -------- LOAD AJAX -------- */
+                function loadAjax(){
+                  $.ajax({
+                  url: dest,
+                  cache: false
+                  }).done(function( msg ) {
+                      content.html('<div class="vbox-inline">'+ msg +'</div>');
+                      preloadFirst();
+
+                  }).fail(function() {
+                      content.html('<div class="vbox-inline"><p>Error retrieving contents, please retry</div>');
+                      updateoverlay();
+                  });
+                }
+
+                /* -------- LOAD IFRAME -------- */
+                function loadIframe(){
+                    content.html('<iframe class="venoframe" src="'+dest+'"></iframe>');
+                  //  $('.venoframe').load(function(){ // valid only for iFrames in same domain
+                    updateoverlay();
+                  //  });
+                }
+
+                /* -------- LOAD VIDEOs -------- */
+                function loadVid(autoplay){
+
+                    var player;
+                    var videoObj = parseVideo(dest);
+
+                    // set rel=0 to hide related videos at the end of YT + optional autoplay
+                    var stringAutoplay = autoplay ? "?rel=0&autoplay=1" : "?rel=0";
+                    var queryvars = stringAutoplay + getUrlParameter(dest);
+
+                    if (videoObj.type == 'vimeo') {
+                      player = 'https://player.vimeo.com/video/';
+                    } else if (videoObj.type == 'youtube') {
+                      player = 'https://www.youtube.com/embed/';
+                    }
+                    content.html('<iframe class="venoframe vbvid" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay" frameborder="0" src="'+player+videoObj.id+queryvars+'"></iframe>');
+                    updateoverlay();
+                }
+
+                /**
+                * Parse Youtube or Vimeo videos and get host & ID
+                */
+                function parseVideo (url) {
+                    url.match(/(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/);
+                    var type;
+                    if (RegExp.$3.indexOf('youtu') > -1) {
+                        type = 'youtube';
+                    } else if (RegExp.$3.indexOf('vimeo') > -1) {
+                        type = 'vimeo';
+                    }
+                    return {
+                        type: type,
+                        id: RegExp.$6
+                    };
+                }
+
+                /**
+                * get additional video url parameters
+                */
+                function getUrlParameter(name) {
+                  var result = '';
+                  var sPageURL = decodeURIComponent(name);
+                  var firstsplit = sPageURL.split('?');
+
+                  if (firstsplit[1] !== undefined) {
+                      var sURLVariables = firstsplit[1].split('&');
+                      var sParameterName;
+                      var i;
+                      for (i = 0; i < sURLVariables.length; i++) {
+                          sParameterName = sURLVariables[i].split('=');
+                          result = result + '&'+ sParameterName[0]+'='+ sParameterName[1];
+                      }
+                  }
+                  return encodeURI(result);
+                }
+
+                /* -------- LOAD INLINE -------- */
+                function loadInline(){
+                    content.html('<div class="vbox-inline">'+$(dest).html()+'</div>');
+                    updateoverlay();
+                }
+
+                /* -------- PRELOAD IMAGE -------- */
+                function preloadFirst(){
+                    images = content.find('img');
+
+                    if (images.length) {
+                        images.each(function(){
+                            $(this).one('load', function() {
+                                updateoverlay();
+                            });
+                        });
+                    } else {
+                        updateoverlay();
+                    }
+                }
+
+                /* -------- FADE-IN THE NEW CONTENT -------- */
+                function updateoverlay(){
+
+                    blocktitle.html(title);
+
+                    content.find(">:first-child").addClass('vbox-figlio').css({
+                        'width': framewidth,
+                        'height': frameheight,
+                        'padding': border,
+                        'background': bgcolor
+                    });
+
+                    $('img.vbox-figlio').on('dragstart', function(event) {
+                        event.preventDefault();
+                    });
+
+                    updateOL();
+
+                    content.animate({
+                        'opacity': '1'
+                    },'slow', function(){
+                        $preloader.hide();
+                    });
+                    option.cb_content_loaded(obj, gallIndex, thenext, theprev);
+                }
+
+                /* -------- CENTER FRAME -------- */
+                function updateOL(){
+
+                    var sonH = content.outerHeight();
+                    var finH = $(window).height();
+
+                    if (sonH + 60 < finH) {
+                        margine = (finH - sonH)/2;
+                    } else {
+                        margine = '30px';
+                    }
+                    content.css('margin-top', margine);
+                    content.css('margin-bottom', margine);
+                    option.cb_post_resize();
+                }
+
+                $(window).resize(function(){
+                    if($('.vbox-content').length){
+                        setTimeout(updateOL(), 800);
+                    }
+                });
+            }); // each
+        } // venobox
+    }); // extend
+})(jQuery);

docs/index.html

@@ -1,11 +1,282 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>官网</title>
+  <meta charset="utf-8">
+  <meta content="width=device-width, initial-scale=1.0" name="viewport">
+
+  <title>ZY Player 资源播放器</title>
+  <meta content="ZY Player 资源播放器, 简洁无广告, 免费高颜值." name="descriptison">
+  <meta content="video, player" name="keywords">
+
+  <!-- Favicons -->
+  <link href="assets/img/favicon.png" rel="icon">
+  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
+
+  <!-- Google Fonts -->
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
+
+  <!-- Vendor CSS Files -->
+  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+  <link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
+  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
+  <link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
+  <link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
+  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
+
+  <!-- Template Main CSS File -->
+  <link href="assets/css/style.css" rel="stylesheet">
+
+  <!-- =======================================================
+  * Template Name: Appland - v2.0.0
+  * Template URL: https://bootstrapmade.com/free-bootstrap-app-landing-page-template/
+  * Author: BootstrapMade.com
+  * License: https://bootstrapmade.com/license/
+  ======================================================== -->
 </head>
+
 <body>
-  待重建
+
+  <!-- ======= Header ======= -->
+  <header id="header" class="fixed-top">
+    <div class="container d-flex">
+
+      <div class="logo mr-auto">
+        <!-- <h1 class="text-light"><a href="index.html">ZY Player</a></h1> -->
+        <!-- Uncomment below if you prefer to use an image logo -->
+        <a href="index.html"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>
+      </div>
+
+      <nav class="nav-menu d-none d-lg-block">
+        <ul>
+          <li class="active"><a href="#header">Home</a></li>
+          <li><a href="#features">特色</a></li>
+          <li><a href="#gallery">截图</a></li>
+          <li><a href="#faq">常见问题</a></li>
+          <li class="get-started"><a target="_blank" href="https://github.com/Hunlongyu/ZY-Player/">Github</a></li>
+        </ul>
+      </nav><!-- .nav-menu -->
+
+    </div>
+  </header><!-- End Header -->
+
+  <!-- ======= Hero Section ======= -->
+  <section id="hero" class="d-flex align-items-center">
+    <div class="container">
+      <div class="row">
+        <div class="col-lg-6 d-lg-flex flex-lg-column justify-content-center align-items-stretch pt-5 pt-lg-0 order-2 order-lg-1" data-aos="fade-up">
+          <div>
+            <h1>ZY Player 资源播放器</h1>
+            <h2>跨平台视频资源播放器, 简洁免费无广告.</h2>
+            <a href="https://github.com/Hunlongyu/ZY-Player/releases" target="_blank" class="download-btn"><i class="icofont-home"></i></i> Github 下载</a>
+            <a href="https://www.lanzous.com/b04s6a3re" target="_blank" class="download-btn"><i class="icofont-cloud"></i> 蓝奏下载 (密码:95px)</a>
+          </div>
+        </div>
+        <div class="col-lg-6 d-lg-flex flex-lg-column align-items-stretch order-1 order-lg-2 hero-img" data-aos="fade-up">
+          <img src="assets/img/light.png" class="img-fluid" alt="">
+        </div>
+      </div>
+    </div>
+
+  </section><!-- End Hero -->
+
+  <main id="main">
+
+    <!-- ======= App Features Section ======= -->
+    <section id="features" class="features">
+      <div class="container">
+
+        <div class="section-title">
+          <h2>软件特色</h2>
+          <p>经过三个大版本更迭, 软件功能丰富, 操作简单.</p>
+        </div>
+
+        <div class="row no-gutters">
+          <div class="col-xl-7 d-flex align-items-stretch order-2 order-lg-1">
+            <div class="content d-flex flex-column justify-content-center">
+              <div class="row">
+                <div class="col-md-6 icon-box" data-aos="fade-up">
+                  <i class="bx bx-receipt"></i>
+                  <h4>浏览</h4>
+                  <p>浏览全网热门视频, 支持切换视频源. 详细的电影分类.支持搜索电影名和演员名称. </p>
+                </div>
+                <div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="100">
+                  <i class="icofont-play-alt-3"></i>
+                  <h4>播放</h4>
+                  <p>支持视频连播, 支持多种播放速度, 支持历史记录, 支持多种全屏播放模式, 支持精简模式(划水模式).</p>
+                </div>
+                <div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="200">
+                  <i class="icofont-star"></i>
+                  <h4>收藏</h4>
+                  <p>一键收藏喜爱的视频, 一键播放. 一键同步视频信息, 追剧更简单.</p>
+                </div>
+                <div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="300">
+                  <i class="icofont-share"></i>
+                  <h4>分享</h4>
+                  <p>一键分享热门视频, 包含电影海报, 支持微信播放.</p>
+                </div>
+                <div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="400">
+                  <i class="icofont-download"></i>
+                  <h4>下载</h4>
+                  <p>部分视频源支持下载 (最大资源网, OK资源网)</p>
+                </div>
+                <div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="500">
+                  <i class="icofont-cubes"></i>
+                  <h4>其他</h4>
+                  <p>多主题, 多语言, 自动更新</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="image col-xl-5 d-flex align-items-stretch justify-content-center order-1 order-lg-2" data-aos="fade-left" data-aos-delay="100">
+            <img src="assets/img/features.svg" class="img-fluid" alt="">
+          </div>
+        </div>
+
+      </div>
+    </section><!-- End App Features Section -->
+
+    <!-- ======= Gallery Section ======= -->
+    <section id="gallery" class="gallery">
+      <div class="container">
+        <div class="section-title">
+          <h2>截图</h2>
+          <p>点击查看大图</p>
+        </div>
+
+        <div class="owl-carousel gallery-carousel" data-aos="fade-up">
+          <a href="assets/img/gallery/001.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/001.png" alt=""></a>
+          <a href="assets/img/gallery/002.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/002.png" alt=""></a>
+          <a href="assets/img/gallery/003.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/003.png" alt=""></a>
+          <a href="assets/img/gallery/004.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/004.png" alt=""></a>
+          <a href="assets/img/gallery/005.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/005.png" alt=""></a>
+          <a href="assets/img/gallery/006.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/006.png" alt=""></a>
+          <a href="assets/img/gallery/007.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/007.png" alt=""></a>
+          <a href="assets/img/gallery/008.png" class="venobox" data-gall="gallery-carousel"><img src="assets/img/gallery/008.png" alt=""></a>
+        </div>
+
+      </div>
+    </section><!-- End Gallery Section -->
+
+    <!-- ======= Frequently Asked Questions Section ======= -->
+    <section id="faq" class="faq section-bg">
+      <div class="container">
+
+        <div class="section-title">
+
+          <h2>常见问题</h2>
+          <p></p>
+        </div>
+
+        <div class="accordion-list">
+          <ul>
+            <li data-aos="fade-up">
+              <i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" class="collapse" href="#accordion-list-1">资源加载不出来或者视频无法播放<i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
+              <div id="accordion-list-1" class="collapse show" data-parent=".accordion-list">
+                <p>
+                  一般是资源网服务器不稳定, 或者资源网屏蔽了IP. 请尝试切换到其他视频源.
+                </p>
+              </div>
+            </li>
+
+            <li data-aos="fade-up" data-aos-delay="100">
+              <i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#accordion-list-2" class="collapsed">视频下载<i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
+              <div id="accordion-list-2" class="collapse" data-parent=".accordion-list">
+                <p>
+                  软件只提供下载链接, 不提供下载功能. 主要是网上的下载工具更优秀. 且只有部分视频源支持下载.(最大资源网和OK资源网)
+                </p>
+              </div>
+            </li>
+
+            <li data-aos="fade-up" data-aos-delay="200">
+              <i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#accordion-list-3" class="collapsed">跨平台<i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
+              <div id="accordion-list-3" class="collapse" data-parent=".accordion-list">
+                <p>
+                  目前支持 Windows, Mac, Linux 桌面系统. 暂不支持手机端或者电视端. 未来会考虑实现全平台.
+                </p>
+              </div>
+            </li>
+
+            <li data-aos="fade-up" data-aos-delay="300">
+              <i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#accordion-list-4" class="collapsed">分享<i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
+              <div id="accordion-list-4" class="collapse" data-parent=".accordion-list">
+                <p>
+                  主要是分享到手机端, 长按二维码识别播放. 或者用手机扫一扫二维码播放. 支持微信打开播放. 请勿分享传播违法资源, 否则后果自负.
+                </p>
+              </div>
+            </li>
+          </ul>
+        </div>
+
+      </div>
+    </section><!-- End Frequently Asked Questions Section -->
+
+
+  </main><!-- End #main -->
+
+  <!-- ======= Footer ======= -->
+  <footer id="footer">
+
+    <div class="footer-top">
+      <div class="container">
+        <div class="row">
+
+          <div class="col-lg-3 col-md-6 footer-contact" data-aos="fade-up">
+            <h3>ZY Player</h3>
+            <p>
+              <strong>作者:</strong> Hunlongyu<br>
+              <strong>Email:</strong> hunlongyu@gmail.com<br>
+            </p>
+          </div>
+
+          <div class="col-lg-3 col-md-6 footer-links" data-aos="fade-up" data-aos-delay="100">
+            <h4>友情链接</h4>
+            <ul>
+              <li><i class="bx bx-chevron-right"></i> <a target="_blank" href="#">Home</a></li>
+              <li><i class="bx bx-chevron-right"></i> <a target="_blank" href="https://www.ghpym.com/zyplayer.html">果核剥壳</a></li>
+              <li><i class="bx bx-chevron-right"></i> <a target="_blank" href="https://www.iplaysoft.com/zy-player.html">异次元软件世界</a></li>
+            </ul>
+          </div>
+
+          <div class="col-lg-3 col-md-6 footer-links" data-aos="fade-up" data-aos-delay="200">
+            <h4>帮助</h4>
+            <ul>
+              <li><i class="bx bx-chevron-right"></i> <a target="_blank" href="https://github.com/Hunlongyu/ZY-Player/issues">反馈</a></li>
+              <li><i class="bx bx-chevron-right"></i> <a target="_blank" href="https://github.com/Hunlongyu/ZY-Player/releases">版本</a></li>
+            </ul>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+    <div class="container py-4">
+      <div class="copyright">
+        &copy; Copyright <strong><span>ZY Player</span></strong>. All Rights Reserved
+      </div>
+      <div class="credits">
+        <!-- All the links in the footer should remain intact. -->
+        <!-- You can delete the links only if you purchased the pro version. -->
+        <!-- Licensing information: https://bootstrapmade.com/license/ -->
+        <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/free-bootstrap-app-landing-page-template/ -->
+        Designed by <a href="https://github.com/Hunlongyu/">Hunlongyu</a>
+      </div>
+    </div>
+  </footer><!-- End Footer -->
+
+  <a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>
+
+  <!-- Vendor JS Files -->
+  <script src="assets/vendor/jquery/jquery.min.js"></script>
+  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+  <script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
+  <script src="assets/vendor/owl.carousel/owl.carousel.min.js"></script>
+  <script src="assets/vendor/venobox/venobox.min.js"></script>
+  <script src="assets/vendor/aos/aos.js"></script>
+
+  <!-- Template Main JS File -->
+  <script src="assets/js/main.js"></script>
+
 </body>
+
 </html>

docs/player/player.html

@@ -30,8 +30,7 @@
         "width": window.innerWidth,
         "playbackRate": [ 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3 ],
         "x5-video-player-type": "h5",
-        "x5-video-player-fullscreen": "true",
-        "x5-video-orientation": "landscape"
+        "x5-video-player-fullscreen": "true"
       })
     </script>
   </body>

package.json

@@ -1,60 +1,60 @@
 {
   "name": "zy",
-  "version": "0.9.26",
+  "version": "1.1.1",
   "private": true,
-  "author": {
-    "name": "Hunlongyu",
-    "email": "hunlongyu@gmail.com"
-  },
-  "description": "ZY Player 资源播放器",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "electron:build": "vue-cli-service electron:build",
     "dev": "vue-cli-service electron:serve",
+    "electron:build": "vue-cli-service electron:build",
+    "electron:serve": "vue-cli-service electron:serve",
     "postinstall": "electron-builder install-app-deps",
     "postuninstall": "electron-builder install-app-deps",
     "electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten",
-    "release": "vue-cli-service electron:build -p always"
+    "release": "vue-cli-service electron:build -p always",
+    "dist": "vue-cli-service electron:build --win --ia32"
   },
   "main": "background.js",
   "dependencies": {
     "axios": "^0.19.2",
-    "core-js": "^3.6.4",
-    "dexie": "^2.0.4",
-    "electron-updater": "^4.2.5",
-    "element-ui": "^2.13.1",
+    "core-js": "^3.6.5",
+    "cors": "^2.8.5",
+    "dexie": "^3.0.1",
+    "electron-localshortcut": "^3.2.1",
+    "element-ui": "^2.13.2",
+    "express": "^4.17.1",
+    "fast-xml-parser": "^3.17.4",
     "html2canvas": "^1.0.0-rc.5",
-    "leancloud-storage": "^4.5.3",
-    "macaddress": "^0.2.9",
     "modern-normalize": "^0.6.0",
+    "mousetrap": "^1.6.5",
     "qrcode.vue": "^1.7.0",
     "vue": "^2.6.11",
-    "vue-i18n": "^8.17.0",
-    "vuex": "^3.1.3",
-    "xgplayer": "^2.6.14",
-    "xgplayer-hls.js": "^2.1.6"
+    "vue-infinite-loading": "^2.4.5",
+    "vue-waterfall-plugin": "^1.0.7",
+    "vuex": "^3.4.0",
+    "xgplayer": "^2.9.8",
+    "xgplayer-hls.js": "^2.2.3"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.3.0",
-    "@vue/cli-plugin-eslint": "~4.3.0",
-    "@vue/cli-plugin-vuex": "~4.3.0",
-    "@vue/cli-service": "~4.3.0",
+    "@vue/cli-plugin-babel": "~4.4.0",
+    "@vue/cli-plugin-eslint": "~4.4.0",
+    "@vue/cli-plugin-vuex": "~4.4.0",
+    "@vue/cli-service": "~4.4.0",
     "@vue/eslint-config-standard": "^5.1.2",
     "babel-eslint": "^10.1.0",
     "babel-plugin-component": "^1.1.1",
-    "electron": "^8.2.1",
-    "electron-icon-builder": "^1.0.2",
+    "electron": "^9.0.5",
+    "electron-devtools-installer": "^3.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^6.2.2",
-    "sass": "^1.26.3",
+    "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
-    "vue-cli-plugin-electron-builder": "2.0.0-beta.6",
+    "vue-cli-plugin-electron-builder": "2.0.0-rc.4",
     "vue-template-compiler": "^2.6.11"
   }
 }

public/index.html

@@ -4,17 +4,8 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>icon.png">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <script>
-      var _hmt = _hmt || [];
-      (function() {
-        var hm = document.createElement("script");
-        hm.src = "https://hm.baidu.com/hm.js?62aeb2505bfa26a2461d2a7a3b485096";
-        var s = document.getElementsByTagName("script")[0]; 
-        s.parentNode.insertBefore(hm, s);
-      })();
-    </script>
   </head>
   <body>
     <noscript>

src/App.vue

@@ -16,6 +16,7 @@
     </transition>
   </div>
 </template>
+
 <script>
 export default {
   name: 'App',
@@ -34,18 +35,21 @@ export default {
     share () {
       return this.$store.getters.getShare
     },
-    theme () {
-      return this.$store.getters.getTheme
+    setting () {
+      return this.$store.getters.getSetting
     }
   },
   watch: {
-    theme () {
-      this.changeTheme()
+    setting: {
+      handler () {
+        this.changeSetting()
+      },
+      deep: true
     }
   },
   methods: {
-    changeTheme () {
-      this.appTheme = `theme-${this.theme}`
+    changeSetting () {
+      this.appTheme = `theme-${this.setting.theme}`
     }
   }
 }

src/assets/scss/style.scss

@@ -42,6 +42,22 @@
       border-left: .3em solid transparent;
     }
   }
+  .vs-input{
+    height: 30px;
+    input{
+      border: none;
+      width: 200px;
+      height: 30px;
+      text-indent: 22px;
+      background-color: #ffffff00;
+      outline: none;
+    }
+  }
+  .vs-noAfter{
+    &::after{
+      display: none;
+    }
+  }
   .vs-options{
     z-index: 2;
     width: 100%;
@@ -69,37 +85,8 @@
   flex-direction: column;
   height: 100%;
   font-size: 15px;
-  .tHead{
-    height: 50px;
-    width: 100%;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    border-bottom: 1px solid;
-    padding: 0 5px 0 0;
-    font-weight: 600;
-    span{
-      display: flex;
-      width: 180px;
-      font-size: 16px;
-      &.name{
-        flex: 1;
-        padding-left: 15px;
-      }
-      &.type{
-        width: 120px;
-      }
-      &.from{
-        width: 120px;
-      }
-      &.operate{
-        width: 120px;
-      }
-    }
-  }
   .tBody{
     flex: 1;
-    overflow-y: scroll;
     border-bottom: 1px solid;
     ul{
       list-style: none;
@@ -126,32 +113,28 @@
             text-overflow: ellipsis;
             white-space: nowrap;
           }
+          &.note{
+            width: 180px;
+          }
           &.type{
             width: 120px;
           }
+          &.last{
+            width: 160px;
+          }
+          &.time{
+            width: 60px;
+          }
           &.from{
             width: 120px;
           }
           &.operate{
-            width: 120px;
+            width: 170px;
           }
         }
       }
     }
   }
-  .tFooter{
-    width: 100%;
-    height: 40px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-direction: row;
-    padding-right: 10px;
-    .tFooter-span{
-      padding-left: 10px;
-      font-size: 12px;
-    }
-  }
 }
 
 // scroll

src/assets/scss/theme.scss

@@ -12,10 +12,10 @@
   --l-fc-3: #823aa0;
   --l-bgc-1: #ffffff;
   --l-bgc-2: #f2f6f9;
-  --l-bsc: 0 3px 1px -2px #8e8da233, 0 2px 2px 0 #8e8da224, 0 1px 5px 0 #8e8da21f;
+  --l-bsc: 0 1px 3px #8e8da233, 0 1px 2px #8e8da244;
+  --l-bsc-hover: 0 14px 28px #8e8da255, 0 10px 10px #8e8da244;
   --l-bsc-2: 0 -4px 23px 0 #8e8da233;
-  --l-bsc-hover: 0 14px 26px -12px #8e8da26b, 0 4px 23px 0 #8e8da21f, 0 8px 10px -5px #8e8da233;
-  --l-bsc-scroll: inset 0 0 5px #823aa005;
+  --l-bsc-scroll: inset 0 0 5px #823aa000;
 
   // dark
   --d-c-0: #38dd77;
@@ -30,9 +30,9 @@
   --d-fc-3: #38dd77;
   --d-bgc-1: #222222;
   --d-bgc-2: #2f2f2f;
-  --d-bsc: 0 3px 1px -2px #38dd7733, 0 2px 2px 0 #38dd7722, 0 1px 5px 0 #38dd7711;
+  --d-bsc: 0 1px 3px #38dd7733, 0 1px 2px #38dd7744;
+  --d-bsc-hover: 0 14px 28px #38dd7755, 0 10px 10px #38dd7744;
   --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
@@ -43,19 +43,38 @@
   --g-c-5: #EAEF9D55;
   --g-c-8: #EAEF9D88;
   --g-c-9: #EAEF9D99;
-  --g-fc-1: #80B155;
-  --g-fc-2: #C1D95CAA;
+  --g-fc-1: #ffffff;
+  --g-fc-2: #d2dedc;
   --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;
+  --g-bgc-1: #4baea0;
+  --g-bgc-2: #74b4ac;
+  --g-bsc: 0 1px 3px #e1ebe033, 0 1px 2px #e1ebe044;
+  --g-bsc-hover: 0 14px 28px #e1ebe055, 0 10px 10px #e1ebe044;
+  --g-bsc-2: 0 -4px 23px 0 #e1ebe033;
+  --g-bsc-scroll: inset 0 0 5px #e1ebe005;
+
+  // pink
+  --p-c-0: #f4f7f7;
+  --p-c-1: #f4f7f711;
+  --p-c-2: #f4f7f722;
+  --p-c-3: #f4f7f733;
+  --p-c-5: #f4f7f755;
+  --p-c-8: #f4f7f788;
+  --p-c-9: #f4f7f799;
+  --p-fc-1: #ffffff;
+  --p-fc-2: #FFFFF3;
+  --p-fc-3: #f15c5c;
+  --p-bgc-1: #ff8499;
+  --p-bgc-2: #fea1b2;
+  --p-bsc: 0 1px 3px #ef528533, 0 1px 2px #ef528544;
+  --p-bsc-hover: 0 14px 28px #ef528555, 0 10px 10px #ef528544;
+  --p-bsc-2: 0 -4px 23px 0 #ef528533;
+  --p-bsc-scroll: inset 0 0 5px #ef528505;
 }
 
 @import './theme/light.scss';
 @import './theme/dark.scss';
 @import './theme/green.scss';
+@import './theme/pink.scss';
 
 @import './style.scss';

src/assets/scss/theme/dark.scss

@@ -1,40 +1,10 @@
 .theme-dark{
   background-color: var(--d-bgc-1);
-  .xgplayer-skin-default video{
-    background-color: var(--d-bgc-2);
-  }
-  .el-pagination{
-    background-color: var(--d-bgc-1);
-    color: var(--d-fc-1);
-    .el-pagination__total, .el-pagination__jump, .el-input__inner{
-      color: var(--d-fc-1);
-      background-color: var(--d-bgc-1);
-    }
-    .el-input__inner{
-      border-color: var(--d-c-3);
-    }
-    .el-pager{
-      .number{
-        background-color: var(--d-bgc-1);
-      }
-      .number:hover{
-        color: var(--d-c-8);
-      }
-      .active{
-        color: var(--d-c-9);
-      }
-    }
-    .more, .btn-next, .btn-prev{
-      background-color: var(--d-bgc-1);
-      &:hover{
-        color: var(--d-c-8);
-      }
-    }
-  }
   .zy-select{
     color: var(--d-fc-1);
     background-color: var(--d-bgc-1);
     box-shadow: var(--d-bsc);
+    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
     &:hover{
       box-shadow: var(--d-bsc-hover);
     }
@@ -42,6 +12,7 @@
       background-color: var(--d-bgc-1);
       box-shadow: var(--d-bsc);
       ul{
+        overflow-y: scroll;
         li{
           &:hover{
             background-color: var(--d-c-1);
@@ -52,25 +23,25 @@
         }
       }
     }
+    .vs-input{
+      input{
+        color: var(--d-fc-1);
+        &::-webkit-input-placeholder{
+          color: var(--d-fc-1);
+        }
+      }
+    }
   }
   .zy-table{
     color: var(--d-fc-2);
-    .tHead{
-      background-color: var(--d-bgc-1);
-      border-bottom-color: var(--d-c-3);
-    }
     .tBody{
       border-bottom-color: var(--d-c-3);
       ul{
         li{
           border-bottom-color: var(--d-c-2);
+          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
           &:hover{
-            animation: d-tableHoverAni 0.2s ease both;
-            @keyframes d-tableHoverAni {
-              to{
-                box-shadow: var(--d-bsc-hover);
-              }
-            }
+            box-shadow: var(--d-bsc-hover);
           }
           span{
             &.btn:hover{
@@ -80,21 +51,16 @@
         }
       }
     }
-    .tFooter{
-      .tFooter-span{
-        color: var(--d-fc-1);
-      }
-    }
   }
   .zy-scroll{
     &:hover{
       &::-webkit-scrollbar-thumb {
         box-shadow: var(--d-bsc-scroll);
-        background: var(--d-c-3);
+        background: var(--d-c-5);
       }
       &::-webkit-scrollbar-track {
         box-shadow: var(--d-bsc-scroll);
-        background: var(--bgc);
+        background: var(--d-bgc-1);
       }
     }
   }
@@ -115,6 +81,7 @@
         background-color: var(--d-c-2);
       }
       &.active{
+        background-color: var(--d-bgc-2);
         svg{
           stroke: var(--d-c-0);
           stroke-width: 2;
@@ -126,6 +93,9 @@
   .frame{
     span{
       &.min{
+        background-color: #32dc36;
+      }
+      &.max{
         background-color: #ffbe2a;
       }
       &.close{
@@ -134,7 +104,7 @@
     }
   }
   .detail{
-    color: var(--d-fc-1);
+    color: var(--d-fc-1) !important;
     background-color:var(--d-bgc-1);
     box-shadow: var(--d-bsc-2);
     .detail-content{
@@ -149,10 +119,17 @@
         }
       }
       .detail-body{
-        .info, .desc, .m3u8_urls, .mp4_urls{
+        .info, .desc, .m3u8, .operate{
           border-color: var(--d-c-2);
         }
-        .m3u8_urls, .mp4_urls{
+        .operate{
+          span{
+            &:hover{
+              color: var(--d-fc-2);
+            }
+          }
+        }
+        .m3u8{
           .box{
             span{
               border-color: var(--d-c-5);
@@ -168,36 +145,20 @@
     }
   }
   .film{
-    .top{
-      .search{
-        background-color: var(--d-bgc-1);
-        box-shadow: var(--d-bsc);
-        &:hover{
-          box-shadow: var(--d-bsc-hover);
-        }
-        svg{
-          stroke: var(--d-c-0);
-          stroke-width: 1;
-          fill: none;
-        }
-        .search-box{
-          background-color: var(--d-bgc-1);
-        }
-        &.active{
-          box-shadow: var(--d-bsc-hover);
-          svg{
-            stroke-width: 1.5;
-            fill: var(--d-c-2);
-          }
-        }
-        input{
-          color: var(--d-fc-1);
-        }
-      }
-    }
-    .middle{
+    .body{
       background-color: var(--d-bgc-1);
       box-shadow: var(--d-bsc);
+      .show-img{
+        color: var(--d-fc-1);
+        .card{
+          background-color: var(--d-bgc-1);
+          box-shadow: var(--d-bsc);
+          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+          &:hover{
+            box-shadow: var(--d-bsc-hover);
+          }
+        }
+      }
     }
   }
   .play{
@@ -286,10 +247,6 @@
         }
       }
     }
-    .play-mask{
-      background-color: var(--d-bgc-1);
-      color: var(--d-fc-1);
-    }
   }
   .star{
     background-color: var(--d-bgc-1);
@@ -306,12 +263,18 @@
         }
       }
     }
+    .view, .shortcut, .site{
+      .title{
+        color: var(--d-fc-1);
+      }
+    }
     .theme{
       .title{
         color: var(--d-fc-1);
       }
       .theme-item{
         box-shadow: var(--d-bsc);
+        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
         &:hover{
           box-shadow: var(--d-bsc-hover);
           .theme-name{
@@ -329,6 +292,10 @@
       }
       .qrcode-item{
         box-shadow: var(--d-bsc);
+        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+        &:hover{
+          box-shadow: var(--d-bsc-hover);
+        }
       }
     }
   }

src/assets/scss/theme/green.scss

@@ -1,40 +1,10 @@
 .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);
+    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
     &:hover{
       box-shadow: var(--g-bsc-hover);
     }
@@ -42,6 +12,7 @@
       background-color: var(--g-bgc-1);
       box-shadow: var(--g-bsc);
       ul{
+        overflow-y: scroll;
         li{
           &:hover{
             background-color: var(--g-c-1);
@@ -52,25 +23,25 @@
         }
       }
     }
+    .vs-input{
+      input{
+        color: var(--g-fc-1);
+        &::-webkit-input-placeholder{
+          color: var(--g-fc-1);
+        }
+      }
+    }
   }
   .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);
+          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
           &:hover{
-            animation: d-tableHoverAni 0.2s ease both;
-            @keyframes d-tableHoverAni {
-              to{
-                box-shadow: var(--g-bsc-hover);
-              }
-            }
+            box-shadow: var(--g-bsc-hover);
           }
           span{
             &.btn:hover{
@@ -80,21 +51,16 @@
         }
       }
     }
-    .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);
+        background: var(--g-c-5);
       }
       &::-webkit-scrollbar-track {
         box-shadow: var(--g-bsc-scroll);
-        background: var(--bgc);
+        background: var(--g-bgc-1);
       }
     }
   }
@@ -115,6 +81,7 @@
         background-color: var(--g-c-2);
       }
       &.active{
+        background-color: var(--g-bgc-2);
         svg{
           stroke: var(--g-c-0);
           stroke-width: 2;
@@ -126,6 +93,9 @@
   .frame{
     span{
       &.min{
+        background-color: #32dc36;
+      }
+      &.max{
         background-color: #ffbe2a;
       }
       &.close{
@@ -134,7 +104,7 @@
     }
   }
   .detail{
-    color: var(--g-fc-1);
+    color: var(--g-fc-1) !important;
     background-color:var(--g-bgc-1);
     box-shadow: var(--g-bsc-2);
     .detail-content{
@@ -149,10 +119,17 @@
         }
       }
       .detail-body{
-        .info, .desc, .m3u8_urls, .mp4_urls{
+        .info, .desc, .m3u8, .operate{
           border-color: var(--g-c-2);
         }
-        .m3u8_urls, .mp4_urls{
+        .operate{
+          span{
+            &:hover{
+              color: var(--g-fc-2);
+            }
+          }
+        }
+        .m3u8{
           .box{
             span{
               border-color: var(--g-c-5);
@@ -168,36 +145,20 @@
     }
   }
   .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{
+    .body{
       background-color: var(--g-bgc-1);
       box-shadow: var(--g-bsc);
+      .show-img{
+        color: var(--g-fc-1);
+        .card{
+          background-color: var(--g-bgc-1);
+          box-shadow: var(--g-bsc);
+          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+          &:hover{
+            box-shadow: var(--g-bsc-hover);
+          }
+        }
+      }
     }
   }
   .play{
@@ -286,10 +247,6 @@
         }
       }
     }
-    .play-mask{
-      background-color: var(--g-bgc-1);
-      color: var(--g-fc-1);
-    }
   }
   .star{
     background-color: var(--g-bgc-1);
@@ -306,12 +263,18 @@
         }
       }
     }
+    .view, .shortcut, .site{
+      .title{
+        color: var(--g-fc-1);
+      }
+    }
     .theme{
       .title{
         color: var(--g-fc-1);
       }
       .theme-item{
         box-shadow: var(--g-bsc);
+        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
         &:hover{
           box-shadow: var(--g-bsc-hover);
           .theme-name{
@@ -329,6 +292,10 @@
       }
       .qrcode-item{
         box-shadow: var(--g-bsc);
+        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+        &:hover{
+          box-shadow: var(--g-bsc-hover);
+        }
       }
     }
   }

src/assets/scss/theme/light.scss

@@ -1,31 +1,10 @@
 .theme-light{
   background-color: var(--l-bgc-1);
-  .xgplayer-skin-default video{
-    background-color: var(--l-bgc-2);
-  }
-  .el-pagination{
-    color: var(--l-fc-1);
-    .el-pagination__total, .el-pagination__jump, .el-input__inner{
-      color: var(--l-fc-1);
-    }
-    .el-pager{
-      .number:hover{
-        color: var(--l-c-8);
-      }
-      .active{
-        color: var(--l-c-9);
-      }
-    }
-    .more, .btn-next, .btn-prev{
-      &:hover{
-        color: var(--l-c-8);
-      }
-    }
-  }
   .zy-select{
     color: var(--l-fc-1);
     background-color: var(--l-bgc-1);
     box-shadow: var(--l-bsc);
+    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
     &:hover{
       box-shadow: var(--l-bsc-hover);
     }
@@ -33,6 +12,7 @@
       background-color: var(--l-bgc-1);
       box-shadow: var(--l-bsc);
       ul{
+        overflow-y: scroll;
         li{
           &:hover{
             background-color: var(--l-c-1);
@@ -43,25 +23,25 @@
         }
       }
     }
+    .vs-input{
+      input{
+        color: var(--l-fc-1);
+        &::-webkit-input-placeholder{
+          color: var(--l-fc-1);
+        }
+      }
+    }
   }
   .zy-table{
     color: var(--l-fc-2);
-    .tHead{
-      background-color: var(--l-bgc-1);
-      border-bottom-color: var(--l-c-3);
-    }
     .tBody{
       border-bottom-color: var(--l-c-3);
       ul{
         li{
           border-bottom-color: var(--l-c-2);
+          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
           &:hover{
-            animation: l-tableHoverAni 0.2s ease both;
-            @keyframes l-tableHoverAni {
-              to{
-                box-shadow: var(--l-bsc-hover);
-              }
-            }
+            box-shadow: var(--l-bsc-hover);
           }
           span{
             &.btn:hover{
@@ -71,21 +51,16 @@
         }
       }
     }
-    .tFooter{
-      .tFooter-span{
-        color: var(--l-fc-1);
-      }
-    }
   }
   .zy-scroll{
     &:hover{
       &::-webkit-scrollbar-thumb {
         box-shadow: var(--l-bsc-scroll);
-        background: var(--l-c-3);
+        background: var(--l-c-5);
       }
       &::-webkit-scrollbar-track {
         box-shadow: var(--l-bsc-scroll);
-        background: var(--bgc);
+        background: var(--l-bgc-1);
       }
     }
   }
@@ -106,6 +81,7 @@
         background-color: var(--l-c-2);
       }
       &.active{
+        background-color: var(--l-bgc-2);
         svg{
           stroke: var(--l-c-0);
           stroke-width: 2;
@@ -117,6 +93,9 @@
   .frame{
     span{
       &.min{
+        background-color: #32dc36;
+      }
+      &.max{
         background-color: #ffbe2a;
       }
       &.close{
@@ -125,7 +104,7 @@
     }
   }
   .detail{
-    color: var(--l-fc-1);
+    color: var(--l-fc-1) !important;
     background-color:var(--l-bgc-1);
     box-shadow: var(--l-bsc-2);
     .detail-content{
@@ -140,10 +119,17 @@
         }
       }
       .detail-body{
-        .info, .desc, .m3u8_urls, .mp4_urls{
+        .info, .desc, .m3u8, .operate{
           border-color: var(--l-c-2);
         }
-        .m3u8_urls, .mp4_urls{
+        .operate{
+          span{
+            &:hover{
+              color: var(--l-fc-2);
+            }
+          }
+        }
+        .m3u8{
           .box{
             span{
               border-color: var(--l-c-5);
@@ -159,43 +145,27 @@
     }
   }
   .film{
-    .top{
-      .search{
-        background-color: var(--l-bgc-1);
-        box-shadow: var(--l-bsc);
-        &:hover{
-          box-shadow: var(--l-bsc-hover);
-        }
-        svg{
-          stroke: #823aa099;
-          stroke-width: 1;
-          fill: none;
-        }
-        .search-box{
-          background-color: none;
-        }
-        &.active{
-          box-shadow: var(--l-bsc-hover);
-          svg{
-            stroke-width: 1.5;
-            fill: var(--l-c-2);
-          }
-        }
-        input{
-          color: var(--l-fc-1);
-        }
-      }
-    }
-    .middle{
+    .body{
       background-color: var(--l-bgc-1);
       box-shadow: var(--l-bsc);
+      .show-img{
+        color: var(--l-fc-1);
+        .card{
+          background-color: var(--l-bgc-1);
+          box-shadow: var(--l-bsc);
+          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+          &:hover{
+            box-shadow: var(--l-bsc-hover);
+          }
+        }
+      }
     }
   }
   .play{
     background-color: var(--l-bgc-1);
     box-shadow: var(--l-bsc);
     .title{
-      color: var(--d-fc-1);
+      color: var(--l-fc-1);
     }
     .box{
       .more{
@@ -221,9 +191,6 @@
           }
         }
       }
-      .mask{
-        background-color: var(--l-bgc-1);
-      }
     }
     .list{
       border: 1px solid var(--l-c-3);
@@ -280,10 +247,6 @@
         }
       }
     }
-    .play-mask{
-      background-color: var(--l-bgc-1);
-      color: var(--l-fc-1);
-    }
   }
   .star{
     background-color: var(--l-bgc-1);
@@ -300,12 +263,18 @@
         }
       }
     }
+    .view, .shortcut, .site{
+      .title{
+        color: var(--l-fc-1);
+      }
+    }
     .theme{
       .title{
         color: var(--l-fc-1);
       }
       .theme-item{
         box-shadow: var(--l-bsc);
+        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
         &:hover{
           box-shadow: var(--l-bsc-hover);
           .theme-name{
@@ -323,6 +292,10 @@
       }
       .qrcode-item{
         box-shadow: var(--l-bsc);
+        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+        &:hover{
+          box-shadow: var(--l-bsc-hover);
+        }
       }
     }
   }

src/assets/scss/theme/pink.scss

@@ -0,0 +1,316 @@
+.theme-pink{
+  background-color: var(--p-bgc-1);
+  .zy-select{
+    color: var(--p-fc-1);
+    background-color: var(--p-bgc-1);
+    box-shadow: var(--p-bsc);
+    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+    &:hover{
+      box-shadow: var(--p-bsc-hover);
+    }
+    .vs-options{
+      background-color: var(--p-bgc-1);
+      box-shadow: var(--p-bsc);
+      ul{
+        overflow-y: scroll;
+        li{
+          &:hover{
+            background-color: var(--p-c-1);
+          }
+          &.active{
+            background-color: var(--p-c-3);
+          }
+        }
+      }
+    }
+    .vs-input{
+      input{
+        color: var(--p-fc-1);
+        &::-webkit-input-placeholder{
+          color: var(--p-fc-1);
+        }
+      }
+    }
+  }
+  .zy-table{
+    color: var(--p-fc-2);
+    .tBody{
+      border-bottom-color: var(--p-c-3);
+      ul{
+        li{
+          border-bottom-color: var(--p-c-2);
+          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+          &:hover{
+            box-shadow: var(--p-bsc-hover);
+          }
+          span{
+            &.btn:hover{
+              color: var(--p-fc-3)
+            }
+          }
+        }
+      }
+    }
+  }
+  .zy-scroll{
+    &:hover{
+      &::-webkit-scrollbar-thumb {
+        box-shadow: var(--p-bsc-scroll);
+        background: var(--p-c-5);
+      }
+      &::-webkit-scrollbar-track {
+        box-shadow: var(--p-bsc-scroll);
+        background: var(--p-bgc-1);
+      }
+    }
+  }
+  .zy-loading{
+    .loader{
+      color: var(--p-c-3);
+    }
+  }
+  .zy-body{
+    background-color: var(--p-bgc-2);
+  }
+  .aside{
+    .zy-svg{
+      svg{
+        stroke: var(--p-c-0);
+      }
+      &:hover{
+        background-color: var(--p-c-2);
+      }
+      &.active{
+        background-color: var(--p-bgc-2);
+        svg{
+          stroke: var(--p-c-0);
+          stroke-width: 2;
+          fill: var(--p-c-2);
+        }
+      }
+    }
+  }
+  .frame{
+    span{
+      &.min{
+        background-color: #32dc36;
+      }
+      &.max{
+        background-color: #ffbe2a;
+      }
+      &.close{
+        background-color: #ff5f56;
+      }
+    }
+  }
+  .detail{
+    color: var(--p-fc-1) !important;
+    background-color:var(--p-bgc-1);
+    box-shadow: var(--p-bsc-2);
+    .detail-content{
+      .detail-close{
+        svg{
+          stroke-width: 1;
+          stroke: var(--p-c-8);
+          &:hover{
+            stroke-width: 2px;
+            stroke: var(--p-c-9);
+          }
+        }
+      }
+      .detail-body{
+        .info, .desc, .m3u8, .operate{
+          border-color: var(--p-c-2);
+        }
+        .operate{
+          span{
+            &:hover{
+              color: var(--p-fc-2);
+            }
+          }
+        }
+        .m3u8{
+          .box{
+            span{
+              border-color: var(--p-c-5);
+              &:hover{
+                color: var(--p-fc-2);
+                background-color: var(--p-c-1);
+                border-color: var(--p-c-8);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .film{
+    .body{
+      background-color: var(--p-bgc-1);
+      box-shadow: var(--p-bsc);
+      .show-img{
+        color: var(--p-fc-1);
+        .card{
+          background-color: var(--p-bgc-1);
+          box-shadow: var(--p-bsc);
+          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+          &:hover{
+            box-shadow: var(--p-bsc-hover);
+          }
+        }
+      }
+    }
+  }
+  .play{
+    background-color: var(--p-bgc-1);
+    box-shadow: var(--p-bsc);
+    .title{
+      color: var(--p-fc-1);
+    }
+    .box{
+      .more{
+        span{
+          svg{
+            stroke: var(--p-c-5);
+            stroke-width: 1;
+            fill: none;
+          }
+          &:hover{
+            svg{
+              stroke: var(--p-c-8);
+              stroke-width: 1.5;
+              fill: var(--p-c-2);
+            }
+          }
+          &.active{
+            svg{
+              stroke: var(--p-c-9);
+              stroke-width: 2;
+              fill: var(--p-c-3);
+            }
+          }
+        }
+      }
+    }
+    .list{
+      border: 1px solid var(--p-c-3);
+      background-color: var(--p-bgc-2);
+      .list-top{
+        color: var(--p-fc-2);
+        .list-top-close{
+          svg{
+            stroke: var(--p-c-5);
+            stroke-width: 1;
+            fill: none;
+            &:hover{
+              stroke: var(--p-c-8);
+              stroke-width: 1.5;
+              fill: var(--p-c-2);
+            }
+          }
+        }
+      }
+      .list-body{
+        .list-item{
+          li{
+            color: var(--p-fc-1);
+            &.active{
+              background-color: var(--p-c-2);
+              color: var(--p-fc-3);
+            }
+          }
+        }
+        .list-history{
+          li{
+            .title{
+              color: var(--p-fc-1);
+            }
+            &.active{
+              background-color: var(--p-c-2);
+              .title{
+                color: var(--p-fc-3);
+              }
+            }
+            &:hover{
+              background-color: var(--p-c-3);
+              .detail-delete{
+                display: inline-block;
+                color: var(--p-fc-2);
+              }
+            }
+            .detail-delete{
+              &:hover{
+                background-color: var(--p-c-2);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .star{
+    background-color: var(--p-bgc-1);
+    box-shadow: var(--p-bsc);
+  }
+  .setting{
+    background-color: var(--p-bgc-1);
+    box-shadow: var(--p-bsc);
+    .info{
+      a{
+        color: var(--p-fc-1);
+        &:hover{
+          color: var(--p-fc-2);
+        }
+      }
+    }
+    .view, .shortcut, .site{
+      .title{
+        color: var(--p-fc-1);
+      }
+    }
+    .theme{
+      .title{
+        color: var(--p-fc-1);
+      }
+      .theme-item{
+        box-shadow: var(--p-bsc);
+        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+        &:hover{
+          box-shadow: var(--p-bsc-hover);
+          .theme-name{
+            color: var(--p-fc-2)
+          }
+        }
+        .theme-name{
+          color: var(--p-fc-1);
+        }
+      }
+    }
+    .qrcode{
+      .title{
+        color: var(--p-fc-1);
+      }
+      .qrcode-item{
+        box-shadow: var(--p-bsc);
+        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+        &:hover{
+          box-shadow: var(--p-bsc-hover);
+        }
+      }
+    }
+  }
+  .share{
+    background-color: var(--p-bgc-1);
+    color: var(--p-fc-1);
+    border: 1px solid var(--p-c-8);
+    .right{
+      color: var(--p-fc-1);
+      .tops{
+        color: var(--p-fc-2);
+      }
+    }
+    .share-mask{
+      background-color: var(--p-bgc-1);
+    }
+  }
+}

src/background.js

@@ -1,20 +1,14 @@
 'use strict'
 
-import { app, ipcMain, protocol, BrowserWindow } from 'electron'
-import {
-  createProtocol
-  // installVueDevtools
-} from 'vue-cli-plugin-electron-builder/lib'
-import path from 'path'
-import { autoUpdater } from 'electron-updater'
+import './lib/site/server'
+import { app, protocol, BrowserWindow, globalShortcut, ipcMain } from 'electron'
+import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
+import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
-// Keep a global reference of the window object, if you don't, the window will
-// be closed automatically when the JavaScript object is garbage collected.
 let win
 let mini
 
-// Scheme must be registered before the app is ready
 protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }])
 
 function createWindow () {
@@ -22,22 +16,19 @@ function createWindow () {
     width: 1080,
     height: 720,
     frame: false,
-    resizable: false,
-    transparent: true,
+    resizable: true,
     webPreferences: {
       webSecurity: false,
       nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
-    },
-    // eslint-disable-next-line
-    icon: path.join(__static, 'icon.png')
+    }
   })
 
   if (process.env.WEBPACK_DEV_SERVER_URL) {
     win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
     if (!process.env.IS_TEST) win.webContents.openDevTools()
   } else {
+    createProtocol('app')
     win.loadURL('app://./index.html')
-    autoUpdater.checkForUpdatesAndNotify()
   }
 
   win.on('closed', () => {
@@ -48,25 +39,22 @@ function createWindow () {
 function createMini () {
   mini = new BrowserWindow({
     width: 550,
-    minWidth: 260,
+    miniWidth: 860,
     height: 340,
-    minHeight: 180,
+    miniHeight: 180,
     frame: false,
     resizable: true,
-    transparent: true,
-    alwaysOnTop: true,
     webPreferences: {
       webSecurity: false,
       nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
-    },
-    // eslint-disable-next-line
-    icon: path.join(__static, 'icon.png')
+    }
   })
 
   if (process.env.WEBPACK_DEV_SERVER_URL) {
     mini.loadURL(process.env.WEBPACK_DEV_SERVER_URL + 'mini')
     if (!process.env.IS_TEST) mini.webContents.openDevTools()
   } else {
+    createProtocol('app')
     mini.loadURL('app://./mini.html')
   }
 
@@ -75,53 +63,66 @@ function createMini () {
   })
 }
 
+if (process.platform === 'darwin') {
+  app.dock.show()
+}
+if (process.platform === 'Linux') {
+  app.disableHardwareAcceleration()
+}
 app.allowRendererProcessReuse = true
 
 app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit()
-  }
+  app.quit()
 })
 
 app.on('activate', () => {
   if (win === null) {
     createWindow()
   }
-  if (mini === null) {
-    createMini()
-  }
-})
-
-ipcMain.on('min', () => {
-  win.minimize()
-})
-ipcMain.on('close', () => {
-  win.close()
 })
 
 ipcMain.on('mini', () => {
   createMini()
-  win.close()
-})
-ipcMain.on('miniMin', () => {
-  mini.minimize()
-})
-ipcMain.on('miniClose', () => {
-  mini.close()
-  createWindow()
-})
-ipcMain.on('miniOpacity', (e, arg) => {
-  mini.setOpacity(arg)
+  win.hide()
 })
 
-app.on('ready', async () => {
-  if (!process.env.WEBPACK_DEV_SERVER_URL) {
-    createProtocol('app')
-  }
-  createWindow()
+ipcMain.on('win', () => {
+  mini.destroy()
+  win.show()
+  win.webContents.send('miniClosed')
 })
 
-// Exit cleanly on request from parent process in development mode.
+const gotTheLock = app.requestSingleInstanceLock()
+if (!gotTheLock) {
+  app.quit()
+} else {
+  app.on('second-instance', (event, commandLine, workingDirectory) => {
+    if (win) {
+      if (win.isMinimized()) win.restore()
+      win.focus()
+    }
+  })
+  app.on('ready', async () => {
+    if (isDevelopment && !process.env.IS_TEST) {
+      try {
+        await installExtension(VUEJS_DEVTOOLS)
+      } catch (e) {
+        console.error('Vue Devtools failed to install:', e.toString())
+      }
+    }
+    createWindow()
+    globalShortcut.register('Alt+Space', () => {
+      if (win) {
+        win.isFocused() ? win.blur() : win.focus()
+      }
+      if (mini) {
+        mini.isFocused() ? mini.blur() : mini.focus()
+      }
+    })
+  })
+}
+
+
 if (isDevelopment) {
   if (process.platform === 'win32') {
     process.on('message', data => {

src/components/Aside.vue

@@ -2,7 +2,7 @@
   <div class="aside">
     <span :class="[view === 'Film' ? 'active ': ''] + 'zy-svg'" @click="changeView('Film')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="apertureIconTitle">
-        <title id="apertureIconTitle">{{$t('view')}}</title>
+        <title id="apertureIconTitle">view</title>
         <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path>
         <g stroke-linecap="round">
           <path d="M3 16H14.3164"></path>
@@ -16,19 +16,19 @@
     </span>
     <span :class="[view === 'Play' ? 'active ': ''] + 'zy-svg'" @click="changeView('Play')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="playIconTitle">
-        <title id="playIconTitle">{{$t('play')}}</title>
+        <title id="playIconTitle">play</title>
         <path d="M20 12L5 21V3z"></path>
       </svg>
     </span>
     <span :class="[view === 'Star' ? 'active ': ''] + 'zy-svg'" @click="changeView('Star')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="favouriteIconTitle">
-        <title id="favouriteIconTitle">{{$t('star')}}</title>
+        <title id="favouriteIconTitle">star</title>
         <path d="M12,21 L10.55,19.7051771 C5.4,15.1242507 2,12.1029973 2,8.39509537 C2,5.37384196 4.42,3 7.5,3 C9.24,3 10.91,3.79455041 12,5.05013624 C13.09,3.79455041 14.76,3 16.5,3 C19.58,3 22,5.37384196 22,8.39509537 C22,12.1029973 18.6,15.1242507 13.45,19.7149864 L12,21 Z"></path>
       </svg>
     </span>
     <span :class="[view === 'Setting' ? 'active ': ''] + 'zy-svg'" @click="changeView('Setting')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="settingsIconTitle">
-        <title id="settingsIconTitle">{{$t('setting')}}</title>
+        <title id="settingsIconTitle">setting</title>
         <path d="M5.03506429,12.7050339 C5.01187484,12.4731696 5,12.2379716 5,12 C5,11.7620284 5.01187484,11.5268304 5.03506429,11.2949661 L3.20577137,9.23205081 L5.20577137,5.76794919 L7.9069713,6.32070904 C8.28729123,6.0461342 8.69629298,5.80882212 9.12862533,5.61412402 L10,3 L14,3 L14.8713747,5.61412402 C15.303707,5.80882212 15.7127088,6.0461342 16.0930287,6.32070904 L18.7942286,5.76794919 L20.7942286,9.23205081 L18.9649357,11.2949661 C18.9881252,11.5268304 19,11.7620284 19,12 C19,12.2379716 18.9881252,12.4731696 18.9649357,12.7050339 L20.7942286,14.7679492 L18.7942286,18.2320508 L16.0930287,17.679291 C15.7127088,17.9538658 15.303707,18.1911779 14.8713747,18.385876 L14,21 L10,21 L9.12862533,18.385876 C8.69629298,18.1911779 8.28729123,17.9538658 7.9069713,17.679291 L5.20577137,18.2320508 L3.20577137,14.7679492 L5.03506429,12.7050339 Z"></path>
         <circle cx="12" cy="12" r="1"></circle>
       </svg>
@@ -61,17 +61,17 @@ export default {
 .aside{
   width: 60px;
   height: 100%;
-  user-select: none;
-  -webkit-app-region: drag;
   display: flex;
-  justify-content: center;
+  user-select: none;
   align-items: center;
   flex-direction: column;
+  justify-content: center;
+  -webkit-app-region: drag;
   span{
-    -webkit-app-region: no-drag;
     width: 60px;
     height: 60px;
     cursor: pointer;
+    -webkit-app-region: no-drag;
   }
 }
 </style>

src/components/Detail.vue

@@ -2,28 +2,41 @@
   <div class="detail">
     <div class="detail-content">
       <div class="detail-header">
-        <span class="detail-title">{{$t('detail')}}</span>
-        <span class="detail-close zy-svg" @click="closeDetail">
+        <span class="detail-title">详情</span>
+        <span class="detail-close zy-svg" @click="close">
           <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>
+            <title id="closeIconTitle">关闭</title>
             <path d="M6.34314575 6.34314575L17.6568542 17.6568542M6.34314575 17.6568542L17.6568542 6.34314575"></path>
           </svg>
         </span>
       </div>
-      <div class="detail-body zy-scroll" v-show="!loading" :style="{overflowY:scroll? 'auto' : 'hidden',paddingRight: scroll ? '0': '5px' }" @mouseenter="scroll = true" @mouseleave="scroll = false">
-        <div class="info" v-html="vDetail.info"></div>
-        <div class="desc" v-html="vDetail.desc" v-if="show.desc"></div>
-        <div class="m3u8_urls">
-          <div class="title">{{$t('play')}}:</div>
-          <div class="box">
-            <span v-for="(i, j) in vDetail.m3u8_urls" :key="j" @click="playEvent(j)">{{i | ftName}}</span>
+      <div class="detail-body zy-scroll" v-show="!loading">
+        <div class="info">
+          <div class="info-left">
+            <img :src="info.pic" alt="">
+          </div>
+          <div class="info-right">
+            <div class="name">{{info.name}}</div>
+            <div class="director" v-show="info.director">导演: {{info.director}}</div>
+            <div class="actor" v-show="info.actor">主演: {{info.actor}}</div>
+            <div class="type" v-show="info.type">类型: {{info.type}}</div>
+            <div class="area" v-show="info.area">地区: {{info.area}}</div>
+            <div class="lang" v-show="info.lang">语言: {{info.lang}}</div>
+            <div class="year" v-show="info.year">上映: {{info.year}}</div>
+            <div class="last" v-show="info.last">更新: {{info.last}}</div>
+            <div class="note" v-show="info.note">备注: {{info.note}}</div>
           </div>
         </div>
-        <div class="mp4_urls" v-if="show.download">
-          <div class="title">{{$t('download')}}:</div>
+        <div class="operate">
+          <span @click="playEvent(0)">播放</span>
+          <span @click="starEvent">收藏</span>
+          <span @click="downloadEvent">下载</span>
+          <span @click="shareEvent">分享</span>
+        </div>
+        <div class="desc" v-show="info.des">{{info.des}}</div>
+        <div class="m3u8">
           <div class="box">
-            <span v-for="(i, j) in vDetail.mp4_urls" :key="j" @click="download(i)">{{i | ftName}}</span>
-            <span @click="allDownload" v-show="vDetail.mp4_urls.length > 1">{{$t('all_download')}}</span>
+            <span v-for="(i, j) in m3u8List" :key="j" @click="playEvent(j)">{{i | ftName}}</span>
           </div>
         </div>
       </div>
@@ -35,19 +48,16 @@
 </template>
 <script>
 import { mapMutations } from 'vuex'
-import tools from '../lib/site/tools'
+import zy from '../lib/site/tools'
+import { star, history } from '../lib/dexie'
 const { clipboard } = require('electron')
 export default {
   name: 'detail',
   data () {
     return {
-      scroll: false,
       loading: true,
-      vDetail: {},
-      show: {
-        desc: false,
-        download: false
-      }
+      m3u8List: [],
+      info: {}
     }
   },
   filters: {
@@ -65,6 +75,14 @@ export default {
         this.SET_VIEW(val)
       }
     },
+    detail: {
+      get () {
+        return this.$store.getters.getDetail
+      },
+      set (val) {
+        this.SET_DETAIL(val)
+      }
+    },
     video: {
       get () {
         return this.$store.getters.getVideo
@@ -73,82 +91,135 @@ export default {
         this.SET_VIDEO(val)
       }
     },
-    detail: {
+    share: {
       get () {
-        return this.$store.getters.getDetail
+        return this.$store.getters.getShare
       },
       set (val) {
-        this.SET_DETAIL(val)
+        this.SET_SHARE(val)
       }
     }
   },
   methods: {
-    ...mapMutations(['SET_VIEW', 'SET_VIDEO', 'SET_DETAIL']),
-    closeDetail () {
+    ...mapMutations(['SET_VIEW', 'SET_VIDEO', 'SET_DETAIL', 'SET_SHARE']),
+    close () {
       this.detail.show = false
     },
-    getDetail () {
-      tools.detail_get(this.detail.v.site, this.detail.v.detail).then(res => {
-        this.vDetail = res
-        if (res.desc.length > 0) {
-          this.show.desc = true
+    m3u8Parse (e) {
+      const dd = e.dl.dd
+      const type = Object.prototype.toString.call(dd)
+      if (type === '[object Array]') {
+        for (const i of dd) {
+          if (i._flag.indexOf('m3u8') >= 0) {
+            this.m3u8List = i._t.split('#')
+          }
         }
-        if (res.mp4_urls.length > 0) {
-          this.show.download = true
-        }
-        this.$nextTick(() => {
-          this.loading = false
-        })
-      })
+      } else {
+        this.m3u8List = dd._t.split('#')
+      }
     },
     playEvent (n) {
-      const v = { ...this.detail.v }
-      v.index = n
-      this.video = v
-      this.detail.show = false
+      history.find({ site: this.detail.key, ids: this.detail.info.id }).then(res => {
+        if (res) {
+          this.video = { key: res.site, info: { id: res.ids, name: res.name, index: n } }
+        } else {
+          this.video = { key: this.detail.key, info: { id: this.detail.info.id, name: this.detail.info.name, index: n } }
+        }
+      })
+
       this.view = 'Play'
+      this.detail.show = false
     },
-    download (e) {
-      const name = e.split('$')[0]
-      const txt = encodeURI(e.split('$')[1])
-      clipboard.writeText(txt)
-      this.$m.success(name + this.$t('copy_success'))
+    starEvent () {
+      star.find({ site: this.detail.key, ids: this.info.id }).then(res => {
+        if (res) {
+          this.$message.info('已存在')
+        } else {
+          const docs = {
+            site: this.detail.key,
+            ids: this.info.id,
+            name: this.info.name,
+            type: this.info.type,
+            year: this.info.year,
+            last: this.info.last
+          }
+          star.add(docs).then(res => {
+            this.$message.success('收藏成功')
+          })
+        }
+      }).catch(() => {
+        this.$message.warning('收藏失败')
+      })
     },
-    allDownload () {
-      const urls = [...this.vDetail.mp4_urls]
-      let txt = ''
-      for (const i of urls) {
-        const url = encodeURI(i.split('$')[1])
-        txt += (url + '\n')
+    downloadEvent () {
+      zy.download(this.detail.key, this.info.id).then(res => {
+        if (res) {
+          const text = res.dl.dd._t
+          if (text) {
+            const list = text.split('#')
+            let downloadUrl = ''
+            for (const i of list) {
+              const url = encodeURI(i.split('$')[1])
+              downloadUrl += (url + '\n')
+            }
+            clipboard.writeText(downloadUrl)
+            this.$message.success('『MP4』格式的链接已复制, 快去下载吧!')
+          } else {
+            this.$message.warning('没有查询到下载链接.')
+          }
+        } else {
+          const list = [...this.m3u8List]
+          let downloadUrl = ''
+          for (const i of list) {
+            const url = encodeURI(i.split('$')[1])
+            downloadUrl += (url + '\n')
+          }
+          clipboard.writeText(downloadUrl)
+          this.$message.success('『M3U8』格式的链接已复制, 快去下载吧!')
+        }
+      })
+    },
+    shareEvent () {
+      this.share = {
+        show: true,
+        key: this.detail.key,
+        info: this.detail.info
       }
-      clipboard.writeText(txt)
-      this.$m.success(this.$t('copy_success'))
+    },
+    getDetailInfo () {
+      const id = this.detail.info.ids || this.detail.info.id
+      zy.detail(this.detail.key, id).then(res => {
+        if (res) {
+          this.info = res
+          this.m3u8Parse(res)
+          this.loading = false
+        }
+      })
     }
   },
   created () {
-    this.getDetail()
+    this.getDetailInfo()
   }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .detail{
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
-  height: 680px;
-  z-index: 999;
+  height: calc(100% - 40px);
+  z-index: 888;
   .detail-content{
-    height: 680px;
+    height: calc(100% - 10px);
     padding: 0 60px;
     position: relative;
     .detail-header{
       width: 100%;
       height: 40px;
       display: flex;
-      justify-content: space-between;
       align-items: center;
-      padding: 0 -40px;
+      justify-content: space-between;
       .detail-title{
         font-size: 16px;
       }
@@ -156,190 +227,131 @@ export default {
         cursor: pointer;
       }
     }
-    .detail-body{
-      height: 630px;
-      overflow-y: auto;
-      .info{
-        display: flex;
-        justify-content: flex-start;
-        align-items: flex-start;
-        flex-wrap: wrap;
-        width: 955px;
-        padding: 10px;
-        border: 1px solid;
-        border-radius: 2px;
-        margin-bottom: 10px;
-        .vodImg{
-          width: 200px;
-          img{
-            width: 100%;
-            height: auto;
-          }
-        }
-        .vodAd{
-          display: none;
-        }
-        .vodInfo{
-          flex: 1;
-          margin-left: 20px;
-          overflow: hidden;
-          .vodh{
-            margin-bottom: 6px;
-            h2{
-              display: inline-block;
-              margin: 0;
-            }
-            span{
-              font-size: 12px;
-              margin-left: 10px;
-            }
-            label{
-              font-size: 20px;
-              font-weight: bold;
-              margin-left: 20px;
-            }
-          }
-          .cont, .tags{
-            display: none;
-          }
-          ul{
-            padding: 0;
-            margin: 0;
-          }
-          a{
-            display: none;
-            pointer-events: none;
-          }
-          li{
-            list-style: none;
-            font-size: 14px;
-            line-height: 18px;
-            height: 18px;
-            overflow: hidden;
-            span{
-              word-wrap: nowrap;
-            }
-          }
-        }
-        .whitetitle{
+  }
+  .detail-body{
+    height: calc(100% - 50px);
+    overflow-y: auto;
+    .info{
+      width: 100%;
+      padding: 10px;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      justify-content: flex-start;
+      border: 1px solid;
+      border-radius: 2px;
+      margin-bottom: 10px;
+      height: auto;
+      .info-left{
+        width: 200px;
+        height: 100%;
+        img{
           width: 100%;
-          font-size: 22px;
+          height: auto;
+        }
+      }
+      .info-right{
+        flex: 1;
+        margin-left: 20px;
+        .name{
+          font-size: 20px;
+          margin-bottom: 10px;
           font-weight: bold;
-          margin: 4px 0;
         }
-        .people{
-          display: flex;
-          justify-content: flex-start;
-          align-items: flex-start;
-          flex-wrap: wrap;
-          .left{
-            width: 200px;
-            img{
-              width: 100%;
-              height: auto;
-            }
-          }
-          .right{
-            flex: 1;
-            margin-left: 20px;
-            overflow: hidden;
-            p{
-              font-size: 14px;
-            }
-            a{
-              pointer-events: none;
-              text-decoration: none;
-            }
-          }
+        .director, .actor, .type, .area, .lang, .year, .last, .note{
+          font-size: 14px;
+          line-height: 26px;
         }
       }
-      .desc{
-        border: 1px solid;
-        padding: 10px;
-        width: 955px;
-        margin-bottom: 10px;
-        border-radius: 2px;
-        font-size: 14px;
-        line-height: 20px;
-      }
-      .m3u8_urls, .mp4_urls{
-        border: 1px solid;
-        padding: 10px;
-        width: 955px;
-        margin-bottom: 10px;
-        border-radius: 2px;
-        .title{
-          font-size: 16px;
-        }
-        .box{
-          width: 100%;
-          display: flex;
-          justify-content: space-between;
-          flex-wrap: wrap;
-          span{
-            font-size: 12px;
-            border: 1px solid;
-            border-radius: 2px;
-            cursor: pointer;
-            margin: 6px 6px 0px 0px;
-            padding: 8px 22px;
-          }
-          &::after {
-            content: '';
-            flex: 1;
-          }
-        }
-      }
-      .mp4_urls{
-        margin-bottom: 10px;
-      }
     }
-    .detail-mask{
-      width: 980px;
-      height: 600px;
-      position: absolute;
-      top: 50px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      .loader {
-        font-size: 8px;
-        width: 1em;
-        height: 1em;
-        border-radius: 50%;
-        position: relative;
-        text-indent: -9999em;
-        animation: load4 1.3s infinite linear;
-        transform: translateZ(0);
+    .operate{
+      border: 1px solid;
+      padding: 10px;
+      width: 100%;
+      margin-bottom: 10px;
+      border-radius: 2px;
+      span{
+        margin-right: 20px;
+        font-size: 14px;
+        cursor: pointer;
+        user-select: none;
       }
-      @keyframes load4 {
-        0%,
-        100% {
-          box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
-        }
-        12.5% {
-          box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
-        }
-        25% {
-          box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
-        }
-        37.5% {
-          box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
-        }
-        50% {
-          box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
-        }
-        62.5% {
-          box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
-        }
-        75% {
-          box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
-        }
-        87.5% {
-          box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+    }
+    .desc{
+      border: 1px solid;
+      padding: 10px;
+      width: 100%;
+      margin-bottom: 10px;
+      border-radius: 2px;
+      font-size: 14px;
+      line-height: 20px;
+    }
+    .m3u8{
+      border: 1px solid;
+      padding: 10px 0 10px 10px;
+      width: 100%;
+      margin-bottom: 10px;
+      border-radius: 2px;
+      .box{
+        width: 100%;
+        span{
+          display: inline-block;
+          font-size: 12px;
+          border: 1px solid;
+          border-radius: 2px;
+          cursor: pointer;
+          margin: 6px 10px 0px 0px;
+          padding: 8px 22px;
         }
       }
     }
   }
+  .detail-mask{
+    position: absolute;
+    top: 50px;
+    left: 0;
+    width: 100%;
+    height: calc(100% - 50px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .loader {
+      font-size: 8px;
+      width: 1em;
+      height: 1em;
+      border-radius: 50%;
+      position: relative;
+      text-indent: -9999em;
+      animation: load4 1.3s infinite linear;
+      transform: translateZ(0);
+    }
+    @keyframes load4 {
+      0%,
+      100% {
+        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+      }
+      12.5% {
+        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+      }
+      25% {
+        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+      }
+      37.5% {
+        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+      }
+      50% {
+        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+      }
+      62.5% {
+        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+      }
+      75% {
+        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+      }
+      87.5% {
+        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+      }
+    }
+  }
 }
 </style>

src/components/Film.vue

@@ -1,113 +1,118 @@
 <template>
   <div class="film">
-    <div class="top" v-if="top">
-      <!-- site -->
+    <div class="header">
       <div class="zy-select" @mouseleave="show.site = false">
         <div class="vs-placeholder" @click="show.site = true">{{site.name}}</div>
         <div class="vs-options" v-show="show.site">
-          <ul>
-            <li :class="site === j ? 'active' : ''" v-for="(i, j) in sites" :key="j" @click="siteClick(i)">{{ i.name }}</li>
+          <ul class="zy-scroll" style="max-height: 600px;">
+            <li :class="site.key === i.key ? 'active' : ''" v-for="i in sites" :key="i.key" @click="siteClick(i)">{{ i.name }}</li>
           </ul>
         </div>
       </div>
-      <!-- tags -->
-      <div class="zy-select" @mouseleave="show.tags = false" v-if="site.tags.length > 0 && keywords.length <= 0">
-        <div class="vs-placeholder" @click="show.tags = true">{{site.tags[tag].title}}</div>
-        <div class="vs-options" v-show="show.tags">
-          <ul>
-            <li :class="tag === j ? 'active' : ''" v-for="(i, j) in site.tags" :key="j" @click="tagClick(i, j)">{{ i.title }}</li>
+      <div class="zy-select" @mouseleave="show.classList = false" v-if="show.class">
+        <div class="vs-placeholder" @click="show.classList = true">{{type.name}}</div>
+        <div class="vs-options" v-show="show.classList">
+          <ul class="zy-scroll" style="max-height: 600px;">
+            <li :class="type.tid === i.tid ? 'active' : ''" v-for="i in classList" :key="i.tid" @click="classClick(i)">{{ i.name }}</li>
           </ul>
         </div>
       </div>
-      <!-- type -->
-      <div class="zy-select" @mouseleave="show.type = false" v-if="site.tags[tag].children.length > 0 && keywords.length <= 0">
-        <div class="vs-placeholder" @click="show.type = true">{{typeName}}</div>
-        <div class="vs-options" v-show="show.type">
-          <ul>
-            <li :class="type === j ? 'active' : ''" v-for="(i, j) in site.tags[tag].children" :key="j" @click="typeClick(i, j)">{{ i.title }}</li>
+      <div class="zy-select" @mouseleave="show.search = false">
+        <div class="vs-input" @click="show.search = true"><input v-model.trim="searchTxt" type="text" placeholder="搜索" @keyup.enter="searchEvent"></div>
+        <div class="vs-options" v-show="show.search">
+          <ul class="zy-scroll" style="max-height: 600px">
+            <li v-for="(i, j) in searchList" :key="j" @click="searchClickEvent(i)">{{i.keywords}}</li>
+            <li @click="clearSearch">清空历史记录</li>
           </ul>
         </div>
       </div>
-      <div :class="[inputFocus ? 'active ': ''] + 'search'" @mouseover="inputFocus = true" @mouseleave="inputFocus = false">
-        <div class="search-icon">
-          <span class="zy-svg">
-            <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="searchIconTitle">
-              <title id="searchIconTitle">Search</title>
-              <path d="M14.4121122,14.4121122 L20,20"></path>
-              <circle cx="10" cy="10" r="6"></circle>
-            </svg>
-          </span>
-        </div>
-        <input type="text" class="search-box" v-model="keywords" @keypress.enter="searchEvent">
-      </div>
     </div>
-    <div class="middle">
-      <div class="zy-table">
-        <div class="tHead">
-          <span class="name">{{$t('videoName')}}</span>
-          <span class="type">{{$t('type')}}</span>
-          <span class="time">{{$t('time')}}</span>
-          <span class="operate">{{$t('operate')}}</span>
-        </div>
-        <div class="tBody zy-scroll">
-          <ul v-show="!tb.loading">
-            <li v-for="(i, j) in tb.list" :key="j" @click="detailEvent(i)">
-              <span class="name">{{i.name}}</span>
-              <span class="type">{{i.type}}</span>
-              <span class="time">{{i.time}}</span>
-              <span class="operate">
-                <span class="btn" @click.stop="playEvent(i)">{{$t('play')}}</span>
-                <span class="btn" @click.stop="starEvent(i)">{{$t('star')}}</span>
-                <span class="btn" @click.stop="shareEvent(i)">{{$t('share')}}</span>
-              </span>
-            </li>
-          </ul>
-          <div class="tBody-mask zy-loading" v-show="tb.loading">
-            <div class="loader"></div>
+    <div class="body zy-scroll" infinite-wrapper>
+      <div class="show-img" v-if="show.img">
+        <Waterfall :list="list" :gutter="20" :width="240"
+        :breakpoints="{ 1200: { rowPerView: 4 } }"
+        animationEffect="fadeInUp"
+        backgroundColor="rgba(0, 0, 0, 0)"
+        ref="waterfall">
+          <template slot="item" slot-scope="props">
+            <div class="card">
+              <div class="img">
+                <img style="width: 100%" :src="props.data.pic" alt="" @load="$refs.waterfall.refresh()" @click="detailEvent(props.data)">
+                <div class="operate">
+                  <div class="operate-wrap">
+                    <span class="o-play" @click="playEvent(props.data)">播放</span>
+                    <span class="o-star" @click="starEvent(props.data)">收藏</span>
+                    <span class="o-share" @click="shareEvent(props.data)">分享</span>
+                  </div>
+                </div>
+              </div>
+              <div class="name" @click="detailEvent(props.data)">{{props.data.name}}</div>
+              <div class="info">
+                <span>{{props.data.year}}</span>
+                <span>{{props.data.type}}</span>
+              </div>
+            </div>
+          </template>
+        </Waterfall>
+        <infinite-loading force-use-infinite-wrapper :identifier="infiniteId" @infinite="infiniteHandler"></infinite-loading>
+      </div>
+      <div class="show-table" v-if="!show.img">
+        <div class="zy-table">
+          <div class="tBody">
+            <ul>
+              <li v-for="(i, j) in list" :key="j" @click="detailEvent(i)">
+                <span class="name">{{i.name}}</span>
+                <span class="type">{{i.type}}</span>
+                <span class="time">{{i.year}}</span>
+                <span class="last">{{i.last}}</span>
+                <span class="operate">
+                  <span class="btn" @click.stop="playEvent(i)">播放</span>
+                  <span class="btn" @click.stop="starEvent(i)">收藏</span>
+                  <span class="btn" @click.stop="shareEvent(i)">分享</span>
+                </span>
+              </li>
+            </ul>
+            <infinite-loading force-use-infinite-wrapper="tBody" :identifier="infiniteId" @infinite="infiniteHandler"></infinite-loading>
           </div>
         </div>
-        <div class="tFooter">
-          <span class="tFooter-span">今日更新: {{ tb.update }} 条</span>
-          <el-pagination small :page-size="tb.size" :total="tb.total" :current-page="tb.page" @current-change="tbPageChange" layout="total, prev, pager, next, jumper"></el-pagination>
-        </div>
       </div>
     </div>
   </div>
 </template>
 <script>
 import { mapMutations } from 'vuex'
-import { sites, getSite } from '../lib/site/sites'
-import tools from '../lib/site/tools'
-import video from '../lib/dexie/video'
-import setting from '../lib/dexie/setting'
+import { star, history, search, sites } from '../lib/dexie'
+import zy from '../lib/site/tools'
+import Waterfall from 'vue-waterfall-plugin'
+import InfiniteLoading from 'vue-infinite-loading'
 export default {
   name: 'film',
   data () {
     return {
-      sites: sites,
-      site: {},
-      top: false,
-      tag: 0,
-      type: 0,
-      typeName: '',
-      keywords: '',
-      id: '',
       show: {
+        body: false,
         site: false,
-        tags: false,
-        type: false
+        class: false,
+        classList: false,
+        search: false,
+        img: true
       },
-      inputFocus: false,
-      tb: {
-        list: [],
-        page: 1,
-        size: 50,
-        total: 0,
-        update: 0,
-        loading: true
-      }
+      sites: [],
+      site: {},
+      classList: [],
+      type: {},
+      pagecount: 0,
+      list: [],
+      infiniteId: +new Date(),
+      refresh: 0,
+      searchList: [],
+      searchTxt: ''
     }
   },
+  components: {
+    Waterfall,
+    InfiniteLoading
+  },
   computed: {
     view: {
       get () {
@@ -117,12 +122,12 @@ export default {
         this.SET_VIEW(val)
       }
     },
-    gSite: {
+    video: {
       get () {
-        return this.$store.getters.getSite
+        return this.$store.getters.getVideo
       },
       set (val) {
-        this.SET_SITE(val)
+        this.SET_VIDEO(val)
       }
     },
     detail: {
@@ -133,14 +138,6 @@ export default {
         this.SET_DETAIL(val)
       }
     },
-    video: {
-      get () {
-        return this.$store.getters.getVideo
-      },
-      set (val) {
-        this.SET_VIDEO(val)
-      }
-    },
     share: {
       get () {
         return this.$store.getters.getShare
@@ -148,186 +145,320 @@ export default {
       set (val) {
         this.SET_SHARE(val)
       }
+    },
+    setting () {
+      return this.$store.getters.getSetting
     }
   },
   watch: {
-    gSite (n, o) {
-      const s = getSite(n)
-      this.siteClick(s)
+    setting: {
+      handler () {
+        this.changeSetting()
+      },
+      deep: true
+    },
+    view () {
+      this.changeView()
+    },
+    searchTxt () {
+      this.searchChangeEvent()
     }
   },
   methods: {
-    ...mapMutations(['SET_VIEW', 'SET_SITE', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
-    init () {
-      setting.find().then(res => {
-        this.site = getSite(res.site)
-        this.top = true
-        tools.film_get(res.site).then(tRes => {
-          this.tb.list = tRes.list
-          this.tb.total = tRes.total
-          this.tb.update = tRes.update
-          this.tb.loading = false
-        })
-      })
-    },
+    ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
     siteClick (e) {
+      this.list = []
       this.site = e
-      this.tag = 0
-      this.id = e.tags[0].id
       this.show.site = false
-      if (this.keywords.length > 0) {
+      if (this.searchTxt.length > 0) {
         this.searchEvent()
       } else {
-        this.tb.update = 0
-        this.tb.total = 0
-        this.tb.loading = true
-        tools.film_get(e.key, this.id).then(res => {
-          this.tb.list = res.list
-          this.tb.total = res.total
-          this.tb.update = res.update
-          this.tb.loading = false
+        this.classList = []
+        this.type = {}
+        this.getClass().then(res => {
+          if (res) {
+            this.show.class = true
+            this.infiniteId += 1
+          }
         })
       }
     },
-    tagClick (e, n) {
-      this.tb.update = 0
-      this.tb.total = 0
-      this.tag = n
-      this.id = e.id
-      this.typeName = 'All'
-      this.tb.loading = true
-      this.show.tags = false
-      tools.film_get(this.site.key, this.id).then(res => {
-        this.tb.list = res.list
-        this.tb.total = res.total
-        this.tb.update = res.update
-        this.tb.loading = false
+    classClick (e) {
+      this.show.classList = false
+      this.list = []
+      this.type = e
+      this.getPage().then(res => {
+        if (res) {
+          this.infiniteId += 1
+        }
       })
     },
-    typeClick (e, n) {
-      this.tb.update = 0
-      this.tb.total = 0
-      this.type = n
-      this.typeName = e.title
-      this.id = e.id
-      this.tb.loading = true
-      this.show.type = false
-      tools.film_get(this.site.key, this.id).then(res => {
-        this.tb.list = res.list
-        this.tb.total = res.total
-        this.tb.update = res.update
-        this.tb.loading = false
+    getClass () {
+      return new Promise((resolve, reject) => {
+        const key = this.site.key
+        zy.class(key).then(res => {
+          this.classList = res.class
+          this.show.class = true
+          this.pagecount = res.pagecount
+          this.type = { name: '最新', tid: 0 }
+          resolve(true)
+        }).catch(err => {
+          reject(err)
+        })
       })
     },
-    searchEvent () {
-      const flag = this.site.search
-      if (flag === '') {
-        this.$m.warning(this.$t('not_support_search'))
+    getPage () {
+      return new Promise((resolve, reject) => {
+        const key = this.site.key
+        const type = this.type.tid
+        zy.page(key, type).then(res => {
+          this.pagecount = res.pagecount
+          this.show.body = true
+          resolve(true)
+        }).catch(err => {
+          reject(err)
+        })
+      })
+    },
+    infiniteHandler ($state) {
+      const key = this.site.key
+      const type = this.type.tid
+      const page = this.pagecount
+      if (page < 1) {
+        $state.complete()
         return false
       }
-      this.tb.loading = true
-      this.tb.update = 0
-      this.tb.total = 0
-      tools.search_get(this.site.key, this.keywords).then(res => {
-        this.tb.list = res.list
-        this.tb.total = res.total
-        this.tb.loading = false
+      zy.list(key, page, type).then(res => {
+        if (res) {
+          this.pagecount -= 1
+          const type = Object.prototype.toString.call(res)
+          if (type === '[object Array]') {
+            this.list.push(...res)
+          } else {
+            this.list.push(res)
+          }
+          $state.loaded()
+        } else {
+          $state.complete()
+        }
       })
     },
     detailEvent (e) {
       this.detail = {
         show: true,
-        v: e
+        key: this.site.key,
+        info: e
       }
     },
     playEvent (e) {
-      this.video = e
+      history.find({ site: this.site.key, ids: e.id }).then(res => {
+        if (res) {
+          this.video = { key: res.site, info: { id: res.ids, name: res.name, index: res.index } }
+        } else {
+          this.video = { key: this.site.key, info: { id: e.id, name: e.name, index: 0 } }
+        }
+      })
       this.view = 'Play'
     },
     starEvent (e) {
-      video.find({ detail: e.detail }).then(res => {
+      star.find({ site: this.site.key, ids: e.id }).then(res => {
         if (res) {
-          this.$m.warning(this.$t('exists'))
+          this.$message.info('已存在')
         } else {
-          video.add(e).then(res => {
-            this.$m.success(this.$t('star_success'))
+          const docs = {
+            site: this.site.key,
+            ids: e.id,
+            name: e.name,
+            type: e.type,
+            year: e.year,
+            last: e.last
+          }
+          star.add(docs).then(res => {
+            this.$message.success('收藏成功')
           })
         }
+      }).catch(() => {
+        this.$message.warning('收藏失败')
       })
     },
     shareEvent (e) {
       this.share = {
         show: true,
-        v: e
+        key: this.site.key,
+        info: e
       }
     },
-    tbPageChange (e) {
-      this.tb.loading = true
-      this.tb.page = e
-      tools.film_get(this.site.key, this.id, this.tb.page).then(res => {
-        this.tb.list = res.list
-        this.tb.loading = false
+    changeSetting () {
+      this.list = []
+      this.setting.view === 'picture' ? this.show.img = true : this.show.img = false
+      this.refresh++
+    },
+    changeView () {
+      if (this.refresh >= 1) {
+        this.$refs.waterfall.refresh()
+        this.getPage().then(() => {
+          this.infiniteId += 1
+          this.refresh = 0
+        })
+      }
+    },
+    getAllSearch () {
+      search.all().then(res => {
+        this.searchList = res.reverse()
+      })
+    },
+    searchEvent () {
+      const wd = this.searchTxt
+      this.list = []
+      this.pagecount = 0
+      this.show.search = false
+      if (wd) {
+        search.find({ keywords: wd }).then(res => {
+          if (!res) {
+            search.add({ keywords: wd })
+          }
+          this.getAllSearch()
+        })
+        zy.search(this.site.key, wd).then(res => {
+          this.list = res
+        })
+      } else {
+        this.$message.warning('请输入关键字')
+      }
+    },
+    searchClickEvent (e) {
+      this.list = []
+      this.pagecount = 0
+      this.searchTxt = e.keywords
+      this.show.search = false
+      search.remove(e.id).then(res => {
+        search.add({ keywords: e.keywords })
+        this.getAllSearch()
+      })
+      zy.search(this.site.key, e.keywords).then(res => {
+        this.list = res
+      })
+    },
+    clearSearch () {
+      search.clear().then(res => {
+        this.getAllSearch()
+      })
+    },
+    searchChangeEvent () {
+      if (this.searchTxt.length >= 1) {
+        this.show.class = false
+      } else {
+        this.show.class = true
+      }
+    },
+    getAllsites () {
+      sites.all().then(res => {
+        this.sites = res
+        this.site = this.sites[0]
+        this.siteClick(this.site)
       })
     }
   },
   created () {
-    this.init()
+    this.getAllsites()
+    this.getAllSearch()
   }
 }
 </script>
 <style lang="scss" scoped>
 .film{
-  height: 670px;
+  height: calc(100% - 40px);
   width: 100%;
   display: flex;
   flex-direction: column;
-  animation: viewFadeIn 1s ease-in both;
-  .top{
-    width: 100%;
+  .header{
     height: 30px;
+    width: 100%;
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    .search{
-      width: 200px;
-      height: 30px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: 15px;
-      svg{
-        width: 20px;
-        height: 20px;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-      }
-      .search-icon{
-        width: 40px;
-        height: 30px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-      .search-box{
-        width: 160px;
-        height: 30px;
-        border-radius: 20px;
-        border: none;
-        text-indent: 2px;
-        font-size: 14px;
-        &:focus{
-          outline: none;
-          border: none;
+    justify-content: space-between;
+    z-index: 10;
+  }
+  .body{
+    margin-top: 20px;
+    flex: 1;
+    width: 100%;
+    border-radius: 0 0 5px 5px;
+    overflow-y: scroll;
+    &::-webkit-scrollbar{
+      width: 5px;
+      height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      position: absolute;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      position: absolute;
+    }
+    .show-img{
+      height: 100%;
+      width: 100%;
+      padding: 10px;
+      .card{
+        border-radius: 6px;
+        overflow: hidden;
+        .img{
+          position: relative;
+          min-height: 40px;
+          img{
+            width: 100%;
+            height: auto;
+            cursor: pointer;
+          }
+          .operate{
+            display: none;
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            background-color: #111111aa;
+            width: 100%;
+            font-size: 13px;
+            .operate-wrap{
+              display: flex;
+              justify-content: space-between;
+              .o-play, .o-star, .o-share{
+                cursor: pointer;
+                display: inline-block;
+                width: 80px;
+                height: 36px;
+                text-align: center;
+                line-height: 36px;
+                color: #cdcdcd;
+                &:hover{
+                  background-color: #111;
+                }
+              }
+            }
+          }
+        }
+        .name{
+          font-size: 16px;
+          padding: 10px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          cursor: pointer;
+        }
+        .info{
+          display: flex;
+          justify-content: space-between;
+          font-size: 12px;
+          padding: 10px;
+        }
+        &:hover{
+          .operate{
+            display: block;
+          }
         }
       }
     }
   }
-  .middle{
-    height: 620px;
-    width: 100%;
-    margin-top: 10px;
-    padding-bottom: 0px;
-    border-radius: 5px;
-  }
 }
 </style>

src/components/Frame.vue

@@ -1,16 +1,26 @@
 <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>
   </div>
 </template>
 <script>
-const ipc = require('electron').ipcRenderer
+const { remote } = require('electron')
 export default {
   name: 'frame',
   methods: {
     frameClickEvent (e) {
-      ipc.send(e)
+      const win = remote.getCurrentWindow()
+      if (e === 'min') {
+        win.minimize()
+      }
+      if (e === 'max') {
+        win.isMaximized() ? win.unmaximize() : win.maximize()
+      }
+      if (e === 'close') {
+        win.destroy()
+      }
     }
   }
 }
@@ -20,46 +30,18 @@ export default {
   width: 100%;
   height: 40px;
   display: flex;
-  justify-content: flex-end;
-  align-items: center;
   user-select: none;
+  align-items: center;
+  justify-content: flex-end;
   -webkit-app-region: drag;
   span{
-    -webkit-app-region: no-drag;
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    margin-left: 10px;
+    width: 14px;
+    height: 14px;
     cursor: pointer;
-    opacity: 0.5;
-    &: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;
-      }
-    }
+    margin-left: 10px;
+    border-radius: 50%;
+    display: inline-block;
+    -webkit-app-region: no-drag;
   }
 }
 </style>

src/components/Play.vue

@@ -1,21 +1,22 @@
 <template>
   <div class="play">
     <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 class="title">
+        <span v-if="this.right.list.length > 1">『第 {{(video.info.index + 1)}} 集』</span>{{name}}
       </div>
-      <div class="more" v-show="more">
+      <div class="player">
+        <div id="xg"></div>
+      </div>
+      <div class="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">
-            <title id="forwardIconTitle">{{$t('next')}}</title>
+            <title id="forwardIconTitle">下一集</title>
             <path d="M10 14.74L3 19V5l7 4.26V5l12 7-12 7v-4.26z"></path>
           </svg>
         </span>
-        <span class="zy-svg" @click="listEvent" :class="right.type === 'list' ? 'active' : ''" v-show="right.listData.length > 0">
+        <span class="zy-svg" @click="listEvent" :class="right.type === 'list' ? 'active' : ''" v-show="right.list.length > 0">
           <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="dashboardIconTitle">
-            <title id="dashboardIconTitle">{{$t('play_list')}}</title>
+            <title id="dashboardIconTitle">播放列表</title>
             <rect width="20" height="20" x="2" y="2"></rect>
             <path d="M11 7L17 7M11 12L17 12M11 17L17 17"></path>
             <line x1="7" y1="7" x2="7" y2="7"></line>
@@ -25,36 +26,36 @@
         </span>
         <span class="zy-svg" @click="historyEvent" :class="right.type === 'history' ? 'active' : ''">
           <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="timeIconTitle">
-            <title id="timeIconTitle">{{$t('history')}}</title>
+            <title id="timeIconTitle">历史记录</title>
             <circle cx="12" cy="12" r="10"></circle>
             <polyline points="12 5 12 12 16 16"></polyline>
           </svg>
         </span>
-        <span class="zy-svg" @click="starEvent" :class="isStar ? 'active' : ''" v-show="right.listData.length > 0">
+        <span class="zy-svg" @click="starEvent" :class="isStar ? 'active' : ''" v-show="right.list.length > 0">
           <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="favouriteIconTitle">
-            <title id="favouriteIconTitle">{{$t('star')}}</title>
+            <title id="favouriteIconTitle">收藏</title>
             <path d="M12,21 L10.55,19.7051771 C5.4,15.1242507 2,12.1029973 2,8.39509537 C2,5.37384196 4.42,3 7.5,3 C9.24,3 10.91,3.79455041 12,5.05013624 C13.09,3.79455041 14.76,3 16.5,3 C19.58,3 22,5.37384196 22,8.39509537 C22,12.1029973 18.6,15.1242507 13.45,19.7149864 L12,21 Z"></path>
           </svg>
         </span>
-        <span class="zy-svg" @click="detailEvent" v-show="right.listData.length > 0">
+        <span class="zy-svg" @click="detailEvent" v-show="right.list.length > 0">
           <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="feedIconTitle">
-            <title id="feedIconTitle">{{$t('detail')}}</title>
+            <title id="feedIconTitle">详情</title>
             <circle cx="7.5" cy="7.5" r="2.5"></circle>
             <path d="M22 13H2"></path>
             <path d="M18 6h-5m5 3h-5"></path>
             <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" v-show="right.listData.length > 0">
+        <span class="zy-svg" @click="miniEvent" v-show="right.list.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>
+            <title id="tvIconTitle">精简模式</title>
             <polygon points="20 8 20 20 4 20 4 8"></polygon>
             <polyline stroke-linejoin="round" points="8 4 12 7.917 16 4"></polyline>
           </svg>
         </span>
-        <span class="zy-svg" @click="shareEvent" v-show="right.listData.length > 0">
+        <span class="zy-svg" @click="shareEvent" v-show="right.list.length > 0">
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="qrIconTitle">
-            <title id="qrIconTitle">{{$t('share')}}</title>
+            <title id="qrIconTitle">分享</title>
             <rect x="10" y="3" width="7" height="7" transform="rotate(90 10 3)"></rect>
             <rect width="1" height="1" transform="matrix(-1 0 0 1 7 6)"></rect>
             <rect x="10" y="14" width="7" height="7" transform="rotate(90 10 14)"></rect>
@@ -74,39 +75,37 @@
     <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('history') }}</span>
-          <span class="list-top-close zy-svg" @click="closeEvent">
+          <span class="list-top-title">{{ right.type === 'list' ? '播放列表' : '历史记录' }}</span>
+          <span class="list-top-close zy-svg" @click="closeListEvent">
             <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>
+              <title id="closeIconTitle">关闭</title>
               <path d="M6.34314575 6.34314575L17.6568542 17.6568542M6.34314575 17.6568542L17.6568542 6.34314575"></path>
             </svg>
           </span>
         </div>
         <div class="list-body zy-scroll" :style="{overflowY:scroll? 'auto' : 'hidden',paddingRight: scroll ? '0': '5px' }" @mouseenter="scroll = true" @mouseleave="scroll = false">
           <ul v-show="right.type === 'list'" class="list-item">
-            <li v-show="right.listData.length === 0">{{$t('no_data')}}</li>
-            <li @click="listItemEvent(j)" :class="video.index === j ? 'active' : ''" v-for="(i, j) in right.listData" :key="j">{{i | ftName}}</li>
+            <li v-show="right.list.length === 0">无数据</li>
+            <li @click="listItemEvent(j)" :class="video.info.index === j ? 'active' : ''" v-for="(i, j) in right.list" :key="j">{{i | ftName(j)}}</li>
           </ul>
           <ul v-show="right.type === 'history'" class="list-history">
-            <li v-show="right.historyData.length > 1" @click="clearAll">{{$t('clear_data')}}</li>
-            <li v-show="right.historyData.length === 0">{{$t('no_data')}}</li>
-            <li @click="historyItemEvent(m)" :class="video.detail === m.detail ? 'active' : ''" v-for="(m, n) in right.historyData" :key="n"><span class="title">{{m.name}}</span><span @click.stop="removeItem(m)" class="detail-delete">{{$t('delete')}}</span></li>
+            <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>
           </ul>
         </div>
       </div>
     </transition>
-    <div class="play-mask" v-if="right.listData.length === 0 && right.historyData.length === 0">{{$t('no_history')}}</div>
   </div>
 </template>
 <script>
 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 { star, history, setting, shortcut, mini } from '../lib/dexie'
+import zy from '../lib/site/tools'
 import 'xgplayer'
 import Hls from 'xgplayer-hls.js'
-const { ipcRenderer: ipc } = require('electron')
+import mt from 'mousetrap'
+const { remote, ipcRenderer } = require('electron')
 export default {
   name: 'play',
   data () {
@@ -115,30 +114,42 @@ export default {
       right: {
         show: false,
         type: '',
-        listData: [],
-        historyData: []
+        list: [],
+        history: []
       },
       config: {
         id: 'xg',
-        lang: 'zh-cn',
         url: '',
-        fluid: true,
+        lang: 'zh-cn',
+        width: '100%',
+        height: '100%',
         autoplay: false,
         videoInit: true,
         screenShot: true,
-        keyShortcut: 'on',
+        keyShortcut: 'off',
         crossOrigin: true,
+        cssFullscreen: true,
         defaultPlaybackRate: 1,
         playbackRate: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3, 4, 5]
       },
       name: '',
+      length: 0,
       timer: null,
       scroll: false,
-      more: true,
       showNext: false,
       isStar: false,
       isTop: false,
-      mask: false
+      mini: {}
+    }
+  },
+  filters: {
+    ftName (e, n) {
+      const num = e.split('$')
+      if (num.length > 1) {
+        return e.split('$')[0]
+      } else {
+        return `第${(n + 1)}集`
+      }
     }
   },
   computed: {
@@ -173,11 +184,9 @@ export default {
       set (val) {
         this.SET_SHARE(val)
       }
-    }
-  },
-  filters: {
-    ftName (e) {
-      return e.split('$')[0]
+    },
+    setting () {
+      return this.$store.getters.getSetting
     }
   },
   watch: {
@@ -190,118 +199,153 @@ export default {
         this.getUrls()
       },
       deep: true
+    },
+    setting: {
+      handler () {
+        this.changeSetting()
+      },
+      deep: true
     }
   },
   methods: {
     ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
     getUrls () {
-      this.mask = true
+      this.name = ''
       if (this.timer !== null) {
         clearInterval(this.timer)
         this.timer = null
       }
       if (this.xg) {
-        this.xg.pause()
-      }
-      this.changeVideo()
-      tools.detail_get(this.video.site, this.video.detail).then(res => {
-        this.name = this.video.name
-        this.right.listData = res.m3u8_urls
-        if (res.m3u8_urls.length > 1) {
-          const m3 = res.m3u8_urls
-          const arr = []
-          for (const i of m3) {
-            arr.push(i.split('$')[1])
-          }
-          this.xg.src = arr[this.video.index]
-          this.showNext = true
-        } else {
-          const link = res.m3u8_urls[this.video.index]
-          const src = link.split('$')[1]
-          this.xg.src = src
-          this.showNext = false
+        if (this.xg.hasStart) {
+          this.xg.pause()
         }
-        const currentTime = this.video.currentTime
-        if (currentTime !== '') {
+      }
+
+      const index = this.video.info.index | 0
+      let time = 0
+
+      history.find({ site: this.video.key, ids: this.video.info.id }).then(res => {
+        if (res) {
+          if (res.index === index) {
+            time = res.time
+          }
+        }
+        this.playVideo(index, time)
+      })
+    },
+    playVideo (index = 0, time = 0) {
+      const id = this.video.info.id
+      zy.detail(this.video.key, id).then(res => {
+        this.name = res.name
+        const dd = res.dl.dd
+        const type = Object.prototype.toString.call(dd)
+        let m3u8Txt = []
+        if (type === '[object Array]') {
+          for (const i of dd) {
+            if (i._t.indexOf('m3u8') >= 0) {
+              m3u8Txt = i._t.split('#')
+            }
+          }
+        } else {
+          m3u8Txt = dd._t.split('#')
+        }
+        this.right.list = m3u8Txt
+        const m3u8Arr = []
+        for (const i of m3u8Txt) {
+          const j = i.split('$')
+          if (j.length > 1) {
+            for (let m = 0; m < j.length; m++) {
+              if (j[m].indexOf('m3u8') >= 0) {
+                m3u8Arr.push(j[m])
+              }
+            }
+          } else {
+            m3u8Arr.push(j[0])
+          }
+        }
+
+        this.xg.src = m3u8Arr[index]
+        this.showNext = m3u8Arr.length > 1
+
+        if (time !== 0) {
           this.xg.play()
           this.xg.once('playing', () => {
-            this.xg.currentTime = currentTime
+            this.xg.currentTime = time
           })
         } else {
           this.xg.play()
         }
-        this.xg.once('play', () => {
-          this.mask = false
-        })
-        this.onPlayVideo()
+
+        this.videoPlaying()
         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++
+          if (m3u8Arr.length > 1 && (m3u8Arr.length - 1 > index)) {
+            this.video.info.time = 0
+            this.video.info.index++
           }
           this.xg.off('ended')
         })
       })
     },
+    videoPlaying () {
+      this.changeVideo()
+      history.find({ site: this.video.key, ids: this.video.info.id }).then(res => {
+        if (res) {
+          const doc = {
+            id: res.id,
+            site: res.site,
+            ids: res.ids,
+            name: res.name,
+            type: res.type,
+            year: res.year,
+            index: this.video.info.index,
+            time: res.time
+          }
+          history.update(res.id, doc)
+        } else {
+          const doc = {
+            site: this.video.key,
+            ids: this.video.info.id,
+            name: this.video.info.name,
+            type: this.video.info.type,
+            year: this.video.info.year,
+            index: this.video.info.index,
+            time: ''
+          }
+          history.add(doc)
+        }
+      })
+      this.timerEvent()
+    },
     changeVideo () {
       this.checkStar()
       this.checkTop()
-      this.name = ''
     },
-    checkStar () {
-      video.find({ detail: this.video.detail }).then(res => {
-        if (res) {
-          this.isStar = true
-        } else {
-          this.isStar = false
-        }
-      })
-    },
-    checkTop () {
-      ipc.send('checkTop')
-      ipc.on('isTop', (e, flag) => {
-        this.isTop = flag
-      })
-    },
-    onPlayVideo () {
-      this.more = true
-      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) {
+    timerEvent () {
       this.timer = setInterval(() => {
-        history.find({ detail: d }).then(res => {
+        history.find({ site: this.video.key, ids: this.video.info.id }).then(res => {
           if (res) {
-            const h = { ...this.video }
-            h.currentTime = this.xg.currentTime
-            delete h.id
-            history.update(res.id, h)
+            const doc = { ...res }
+            doc.time = this.xg.currentTime
+            delete doc.id
+            history.update(res.id, doc)
           }
         })
       }, 10000)
     },
-    closeEvent () {
-      this.right.show = false
-      this.right.type = ''
+    prevEvent () {
+      if (this.video.info.index >= 1) {
+        this.video.info.index--
+        this.video.info.time = 0
+      } else {
+        this.$message.warning('这已经是第一集了。')
+      }
     },
     nextEvent () {
-      const v = { ...this.video }
-      const i = v.index + 1
-      if (i < this.right.listData.length) {
-        this.video.currentTime = 0
-        this.video.index++
+      if (this.video.info.index < (this.right.list.length - 1)) {
+        this.video.info.index++
+        this.video.info.time = 0
       } else {
-        this.$m.warning(this.$t('last_video'))
+        this.$message.warning('这已经是最后一集了。')
       }
     },
     listEvent () {
@@ -322,129 +366,338 @@ export default {
         this.right.type = 'history'
       }
       history.all().then(res => {
-        this.right.historyData = res.reverse()
+        this.right.history = res.reverse()
+      })
+    },
+    getAllhistory () {
+      history.all().then(res => {
+        this.right.history = res.reverse()
       })
     },
     starEvent () {
-      video.find({ detail: this.video.detail }).then(res => {
-        if (res !== undefined) {
-          video.remove(res.id).then(r => {
-            this.$m.info(this.$t('delete_success'))
+      const info = this.video.info
+      star.find({ site: this.video.key, ids: info.id }).then(res => {
+        if (res) {
+          star.remove(res.id).then(e => {
+            this.$message.info('取消收藏')
             this.isStar = false
           })
         } else {
-          const v = { ...this.video }
-          if (v.id) {
-            delete v.id
+          const docs = {
+            site: this.video.key,
+            ids: info.id,
+            name: info.name,
+            type: info.type,
+            year: info.year,
+            last: info.last
           }
-          video.add(v).then(r => {
-            this.$m.success(this.$t('star_success'))
+          star.add(docs).then(res => {
+            this.$message.success('收藏成功')
             this.isStar = true
           })
         }
+      }).catch(() => {
+        this.$message.warning('检查收藏失败')
       })
     },
     detailEvent () {
       this.detail = {
         show: true,
-        v: this.video
+        key: this.video.key,
+        info: this.video.info
       }
     },
-    smallEvent () {
-      this.xg.pause()
+    miniEvent () {
+      if (this.xg) {
+        this.xg.pause()
+      }
       mini.find().then(res => {
-        const d = { ...this.video }
-        d.currentTime = this.xg.currentTime
-        d.id = 0
-        if (res) {
-          mini.update(d)
-        } else {
-          mini.add(d)
+        const doc = {
+          id: 0,
+          site: this.video.key,
+          ids: this.video.info.id,
+          name: this.video.info.name,
+          index: this.video.info.index,
+          time: this.xg.currentTime
         }
-        ipc.send('min')
-        ipc.send('mini')
+        if (res) {
+          mini.update(doc)
+        } else {
+          mini.add(doc)
+        }
+        this.mini = doc
+        clearInterval(this.timer)
+        const win = remote.getCurrentWindow()
+        win.hide()
+        ipcRenderer.send('mini')
       })
     },
     shareEvent () {
       this.share = {
         show: true,
-        v: this.video
+        key: this.video.key,
+        info: this.video.info
       }
     },
-    clearAll () {
+    checkStar () {
+      star.find({ site: this.video.key, ids: this.video.info.id }).then(res => {
+        if (res) {
+          this.isStar = true
+        } else {
+          this.isStar = false
+        }
+      })
+    },
+    checkTop () {
+      const win = remote.getCurrentWindow()
+      this.isTop = win.isAlwaysOnTop()
+    },
+    closeListEvent () {
+      this.right.show = false
+      this.right.type = ''
+    },
+    clearAllHistory () {
       history.clear().then(res => {
-        this.right.historyData = []
+        this.right.history = []
       })
     },
     listItemEvent (n) {
-      this.video.index = n
+      this.video.info.time = 0
+      this.video.info.index = n
       this.right.show = false
       this.right.type = ''
     },
     historyItemEvent (e) {
-      this.video = e
+      this.video = {
+        key: e.site,
+        info: {
+          id: e.ids,
+          name: e.name,
+          type: e.type,
+          year: e.year,
+          index: e.index,
+          time: e.time
+        }
+      }
       this.right.show = false
       this.right.type = ''
     },
-    removeItem (e) {
+    removeHistoryItem (e) {
       history.remove(e.id).then(res => {
-        history.all().then(e => {
-          this.right.historyData = e.reverse()
-        })
+        this.$message.success('删除历史记录成功~')
+        this.getAllhistory()
+      }).catch(err => {
+        this.$message.warning('删除历史记录失败, 错误信息: ' + err)
       })
+    },
+    mtEvent () {
+      setting.find().then(res => {
+        if (res.shortcut) {
+          shortcut.all().then(res => {
+            for (const i of res) {
+              mt.bind(i.key, () => {
+                if (this.view === 'Play') {
+                  this.shortcutEvent(i.name)
+                }
+              })
+            }
+          })
+        } else {
+          shortcut.all().then(res => {
+            for (const i of res) {
+              mt.unbind(i.key)
+            }
+          })
+        }
+      })
+    },
+    shortcutEvent (e) {
+      if (e === 'playAndPause') {
+        if (this.xg) {
+          if (this.xg.paused) {
+            this.xg.play()
+          } else {
+            this.xg.pause()
+          }
+        }
+        return false
+      }
+      if (e === 'forward') {
+        if (this.xg && !this.xg.paused) {
+          this.xg.currentTime += 5
+        }
+        return false
+      }
+      if (e === 'back') {
+        if (this.xg && !this.xg.paused) {
+          this.xg.currentTime -= 5
+        }
+        return false
+      }
+      if (e === 'volumeUp') {
+        if (this.xg && this.xg.volume < 0.9) {
+          this.xg.volume += 0.1
+        }
+        return false
+      }
+      if (e === 'volumeDown') {
+        if (this.xg && this.xg.volume > 0.2) {
+          this.xg.volume -= 0.1
+        }
+        return false
+      }
+      if (e === 'mute') {
+        if (this.xg) {
+          this.xg.volume = 0
+        }
+        return false
+      }
+      if (e === 'top') {
+        const win = remote.getCurrentWindow()
+        if (win.isAlwaysOnTop()) {
+          win.setAlwaysOnTop(false)
+        } else {
+          win.setAlwaysOnTop(true)
+        }
+        return false
+      }
+      if (e === 'fullscreen') {
+        if (this.xg.fullscreen) {
+          this.xg.exitFullscreen()
+        } else {
+          this.xg.getFullscreen(this.xg.root)
+        }
+        return false
+      }
+      if (e === 'escape') {
+        this.xg.exitFullscreen()
+        this.xg.exitCssFullscreen()
+        return false
+      }
+      if (e === 'next') {
+        this.nextEvent()
+        return false
+      }
+      if (e === 'prev') {
+        this.prevEvent()
+        return false
+      }
+      if (e === 'home') {
+        if (this.xg && !this.xg.paused) {
+          this.xg.currentTime = 0
+        }
+        return false
+      }
+      if (e === 'end') {
+        if (this.xg && !this.xg.paused) {
+          const endTime = this.xg.duration
+          this.xg.currentTime = endTime
+        }
+        return false
+      }
+      if (e === 'opacityUp') {
+        const win = remote.getCurrentWindow()
+        const num = win.getOpacity()
+        if (num > 0.1) {
+          win.setOpacity(num - 0.1)
+        }
+        return false
+      }
+      if (e === 'opacityDown') {
+        const win = remote.getCurrentWindow()
+        const num = win.getOpacity()
+        if (num < 1) {
+          win.setOpacity(num + 0.1)
+        }
+        return false
+      }
+      if (e === 'playbackRateUp') {
+        if (this.xg && !this.xg.paused) {
+          const rate = this.xg.playbackRate
+          this.xg.playbackRate = rate + 0.25
+          this.$message.info('当前播放速度为: ' + this.xg.playbackRate)
+        }
+        return false
+      }
+      if (e === 'playbackRateDown') {
+        if (this.xg && !this.xg.paused) {
+          const rate = this.xg.playbackRate
+          if (rate > 0.25) {
+            this.xg.playbackRate = rate - 0.25
+            this.$message.info('当前播放速度为: ' + this.xg.playbackRate)
+          }
+        }
+        return false
+      }
+      if (e === 'mini') {
+        this.miniEvent()
+        return false
+      }
+    },
+    changeSetting () {
+      this.mtEvent()
     }
   },
+  created () {
+    this.getAllhistory()
+    this.mtEvent()
+  },
   mounted () {
     this.xg = new Hls(this.config)
-    history.all().then(res => {
-      this.right.historyData = res
+    ipcRenderer.on('miniClosed', () => {
+      this.xg.destroy()
+      this.xg = new Hls(this.config)
+      this.getUrls()
     })
+  },
+  beforeDestroy () {
+    clearInterval(this.timer)
   }
 }
 </script>
 <style lang="scss" scoped>
 .play{
   position: relative;
-  height: 660px;
+  height: calc(100% - 40px);
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 5px;
   .box{
-    width: 92%;
+    width: 100%;
     height: 100%;
     display: flex;
-    justify-content: center;
+    border-radius: 5px;
     align-items: center;
+    justify-content: center;
     flex-direction: column;
     .title{
       width: 100%;
       height: 40px;
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
+      line-height: 40px;
+      padding: 0 10px;
+    }
+    .player{
+      width: 100%;
+      flex: 1;
+      padding: 0 10px;
+      overflow: hidden;
     }
     .more{
       width: 100%;
-      height: 60px;
+      height: 50px;
+      min-height: 50px;
       display: flex;
       justify-content: flex-start;
       align-items: center;
+      padding: 0 10px;
       span{
         display: flex;
         margin-right: 10px;
         cursor: pointer;
       }
     }
-    .mask{
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 600;
-    }
   }
   .list{
     position: absolute;
@@ -511,18 +764,5 @@ export default {
     transform: translateX(100%);
     opacity: 0;
   }
-  .play-mask{
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 900;
-    display: flex;
-    font-size: 14px;
-    border-radius: 5px;
-    justify-content: center;
-    align-items: center;
-  }
 }
 </style>

src/components/Setting.vue

@@ -1,31 +1,73 @@
 <template>
   <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="setting-box zy-scroll">
+      <div class="logo"><img src="@/assets/image/logo.png" alt=""></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>
+        <a @click="linkOpen('http://zyplayer.fun/')">官网</a>
+        <a @click="linkOpen('https://github.com/Hunlongyu/ZY-Player')">Github</a>
+        <a @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/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>
-          <div class="vs-options" v-show="show.language">
-            <ul>
-              <li :class="s.language === i.key ? 'active' : ''" v-for="(i, j) in languages" :key="j" @click="languageClick(i.key)">{{ i.name }}</li>
-            </ul>
+      <div class="view">
+        <div class="title">视图</div>
+        <div class="view-box">
+          <div class="zy-select" @mouseleave="show.view = false">
+            <div class="vs-placeholder" @click="show.view = true">默认视图</div>
+            <div class="vs-options" v-show="show.view">
+              <ul class="zy-scroll">
+                <li :class="d.view === 'picture' ? 'active' : ''" @click="changeView('picture')">海报</li>
+                <li :class="d.view === 'table' ? 'active' : ''" @click="changeView('table')">列表</li>
+              </ul>
+            </div>
           </div>
         </div>
-        <div class="zy-select" @mouseleave="show.site = false">
-          <div class="vs-placeholder" @click="show.site = true">{{$t('default_site')}}</div>
-          <div class="vs-options" v-show="show.site">
-            <ul>
-              <li :class="s.site === i.key ? 'active' : ''" v-for="(i, j) in sites" :key="j" @click="siteClick(i.key)">{{ i.name }}</li>
-            </ul>
+      </div>
+      <div class="shortcut">
+        <div class="title">快捷键</div>
+        <div class="shortcut-box">
+          <div class="zy-select" @mouseleave="show.shortcut = false">
+            <div class="vs-placeholder" @click="show.shortcut = true">快捷键</div>
+            <div class="vs-options" v-show="show.shortcut">
+              <ul class="zy-scroll">
+                <li :class="d.shortcut === true ? 'active' : ''" @click="changeShortcut(true)">开启</li>
+                <li :class="d.shortcut === false ? 'active' : ''" @click="changeShortcut(false)">关闭</li>
+              </ul>
+            </div>
+          </div>
+          <div class="zy-select">
+            <div class="vs-placeholder vs-noAfter" @click="expShortcut">导出</div>
+          </div>
+          <div class="zy-select">
+            <div class="vs-placeholder vs-noAfter" @click="impShortcut">导入</div>
+          </div>
+          <div class="zy-select">
+            <div class="vs-placeholder vs-noAfter" @click="openDoc('shortcut')">说明文档</div>
+          </div>
+        </div>
+      </div>
+      <div class="site">
+        <div class="title">源管理</div>
+        <div class="site-box">
+          <div class="zy-select" @mouseleave="show.site = false">
+            <div class="vs-placeholder" @click="show.site = true">默认源</div>
+            <div class="vs-options" v-show="show.site">
+              <ul class="zy-scroll" style="height: 300px">
+                <li :class="d.site === i.key ? 'active' : ''" v-for="(i, j) in sitesList" :key="j" @click="siteClick(i.key)">{{ i.name }}</li>
+              </ul>
+            </div>
+          </div>
+          <div class="zy-select">
+            <div class="vs-placeholder vs-noAfter" @click="expSites">导出</div>
+          </div>
+          <div class="zy-select">
+            <div class="vs-placeholder vs-noAfter" @click="impSites">导入</div>
+          </div>
+          <div class="zy-select">
+            <div class="vs-placeholder vs-noAfter" @click="openDoc('sites')">说明文档</div>
           </div>
         </div>
       </div>
       <div class="theme">
-        <div class="title">{{$t('theme')}}</div>
+        <div class="title">主题</div>
         <div class="theme-box">
           <div @click="changeTheme('light')" class="theme-item light">
             <div class="theme-image">
@@ -45,129 +87,189 @@
             </div>
             <div class="theme-name">Green</div>
           </div>
+          <div @click="changeTheme('pink')" class="theme-item pink">
+            <div class="theme-image">
+              <img src="../assets/image/pink.png" alt="">
+            </div>
+            <div class="theme-name">Pink</div>
+          </div>
         </div>
       </div>
       <div class="qrcode">
-        <div class="title">{{$t('donate')}}</div>
+        <div class="title">请作者吃辣条</div>
         <div class="qrcode-box">
           <img class="qrcode-item" src="../assets/image/alipay.png">
           <img class="qrcode-item" src="../assets/image/wepay.jpg">
         </div>
       </div>
+      <div class="clearDB">
+        <span @click="clearDBEvent" class="clearBtn">软件重置</span>
+        <span class="clearTips">如非必要, 切勿点击. 会清空用户数据, 恢复默认设置. 点击即软件重置, 并关闭软件.</span>
+      </div>
+      <div class="Tips">
+        <span>所有资源来自网上, 该软件不参与任何制作, 上传, 储存等内容, 禁止传播违法资源. 该软件仅供学习参考, 请于安装后24小时内删除.</span>
+      </div>
     </div>
   </div>
 </template>
 <script>
 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'
+import { setting, sites, shortcut } from '../lib/dexie'
+import { shell, clipboard, remote } from 'electron'
+import db from '../lib/dexie/dexie'
 export default {
   name: 'setting',
   data () {
     return {
       pkg: pkg,
-      s: {},
-      languages: [
-        {
-          key: 'zhCn',
-          name: '中文'
-        },
-        {
-          key: 'en',
-          name: 'English'
-        }
-      ],
-      sites: sites,
+      sitesList: [],
+      shortcutList: [],
       show: {
-        setting: false,
-        language: false,
-        site: false
+        site: false,
+        shortcut: false,
+        view: false
+      },
+      d: {
+        id: 0,
+        site: '',
+        theme: '',
+        shortcut: true,
+        view: 'picture'
       }
     }
   },
   computed: {
-    theme: {
+    setting: {
       get () {
-        return this.$store.getters.getTheme
+        return this.$store.getters.getSetting
       },
       set (val) {
-        this.SET_THEME(val)
-      }
-    },
-    language: {
-      get () {
-        return this.$store.getters.getLanguage
-      },
-      set (val) {
-        this.SET_LANGUAGE(val)
-      }
-    },
-    site: {
-      get () {
-        return this.$store.getters.getSite
-      },
-      set (val) {
-        this.SET_SITE(val)
+        this.SET_SETTING(val)
       }
     }
   },
   methods: {
-    ...mapMutations(['SET_THEME', 'SET_LANGUAGE', 'SET_SITE']),
+    ...mapMutations(['SET_SETTING']),
     linkOpen (e) {
       shell.openExternal(e)
     },
-    languageClick (e) {
-      this.language = e
-      this.show.language = false
-      this.$i18n.locale = e
-      this.s.language = e
-      setting.update(this.s).then(res => {
-        this.$m.success(this.$t('set_success'))
+    getSetting () {
+      setting.find().then(res => {
+        this.d = {
+          id: res.id,
+          site: res.site,
+          theme: res.theme,
+          shortcut: res.shortcut,
+          view: res.view
+        }
+        this.setting = this.d
+      })
+    },
+    getSites () {
+      sites.all().then(res => {
+        this.sitesList = res
+      })
+    },
+    getShortcut () {
+      shortcut.all().then(res => {
+        this.shortcutList = res
+      })
+    },
+    changeView (e) {
+      this.d.view = e
+      setting.update(this.d).then(res => {
+        this.$message.success('修改成功')
+        this.show.view = false
+        this.setting = this.d
       })
     },
     siteClick (e) {
-      this.site = e
-      this.show.site = false
-      this.s.site = e
-      setting.update(this.s).then(res => {
-        this.$m.success(this.$t('set_success'))
+      this.d.site = e
+      setting.update(this.d).then(res => {
+        this.$message.success('修改默认源成功')
+        this.setting = this.d
+        this.show.site = false
+      })
+    },
+    expSites () {
+      const arr = [...this.sitesList]
+      const str = JSON.stringify(arr)
+      clipboard.writeText(str)
+      this.$message.success('已复制到剪贴板')
+    },
+    impSites () {
+      const str = clipboard.readText()
+      const json = JSON.parse(str)
+      sites.clear().then(res => {
+        this.$message.info('已清空原数据')
+        sites.add(json).then(e => {
+          this.$message.success('已添加成功')
+          this.getSites()
+        })
       })
     },
     changeTheme (e) {
-      this.theme = e
-      this.s.theme = e
-      setting.update(this.s).then(res => {
-        this.$m.success(this.$t('set_success'))
+      this.d.theme = e
+      setting.update(this.d).then(res => {
+        this.$message.success('修改成功')
       })
-    }
+    },
+    changeShortcut (e) {
+      this.d.shortcut = e
+      setting.update(this.d).then(res => {
+        this.$message.success('修改成功')
+        this.setting = this.d
+        this.show.shortcut = false
+      })
+    },
+    expShortcut () {
+      const arr = [...this.shortcutList]
+      const str = JSON.stringify(arr)
+      clipboard.writeText(str)
+      this.$message.success('已复制到剪贴板')
+    },
+    impShortcut () {
+      const str = clipboard.readText()
+      const json = JSON.parse(str)
+      shortcut.clear().then(res => {
+        this.$message.info('已清空原数据')
+        shortcut.add(json).then(e => {
+          this.$message.success('已添加成功')
+          this.getSites()
+        })
+      })
+    },
+    clearDBEvent () {
+      db.delete().then(res => {
+        this.$message.success('重置成功')
+        const win = remote.getCurrentWindow()
+        win.destroy()
+      })
+    },
+    openDoc (e) {}
   },
   created () {
-    setting.find().then(res => {
-      this.s = res
-      this.theme = res.theme
-      this.$i18n.locale = this.s.language
-      this.show.setting = true
-    })
+    this.getSetting()
+    this.getSites()
+    this.getShortcut()
   }
 }
 </script>
 <style lang="scss" scoped>
 .setting{
-  height: 660px;
+  height: calc(100% - 40px);
   width: 100%;
+  border-radius: 5px;
   padding: 20px 0;
   .setting-box{
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
-    border-radius: 5px;
     overflow-y: auto;
   }
- .logo{
+  .logo{
     margin-top: 10px;
     width: 100%;
     text-align: center;
@@ -187,14 +289,37 @@ export default {
       cursor: pointer;
     }
   }
-  .change{
+  .view{
     width: 100%;
-    display: flex;
-    justify-content: flex-start;
-    padding-left: 20px;
-    margin-top: 40px;
-    .zy-select{
-      margin-right: 20px;
+    padding: 20px;
+    margin-top: 20px;
+    .view-box{
+      margin-top: 10px;
+      .zy-select{
+        margin-right: 20px;
+      }
+    }
+  }
+  .site{
+    width: 100%;
+    padding: 20px;
+    margin-top: 20px;
+    .site-box{
+      margin-top: 10px;
+      .zy-select{
+        margin-right: 20px;
+      }
+    }
+  }
+  .shortcut{
+    width: 100%;
+    padding: 20px;
+    margin-top: 20px;
+    .shortcut-box{
+      margin-top: 10px;
+      .zy-select{
+        margin-right: 20px;
+      }
     }
   }
   .theme{
@@ -242,5 +367,31 @@ export default {
       }
     }
   }
+  .clearDB{
+    margin-top: 20px;
+    margin-bottom: 20px;
+    .clearBtn{
+      margin-left: 20px;
+      color: red;
+      cursor: pointer;
+      border: 1px solid #ff000088;
+      display: inline-block;
+      width: 160px;
+      height: 32px;
+      font-size: 14px;
+      text-align: center;
+      line-height: 32px;
+    }
+    .clearTips{
+      font-size: 12px;
+      color: #ff000088;
+      margin-left: 10px;
+    }
+  }
+  .Tips{
+    margin: 20px;
+    font-size: 12px;
+    color: #ff000066;
+  }
 }
 </style>

src/components/Share.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="share" id="share" @click="shareClickEvent">
     <div class="left">
-      <img :src="this.card.img" alt="">
+      <img :src="pic" alt="">
     </div>
     <div class="right">
-      <div class="title">{{ card.name }}</div>
-      <qrcode-vue id="qr" :value="value" :size="160" level="L" />
+      <div class="title">{{ share.info.name }}</div>
+      <qrcode-vue id="qr" :value="link" :size="160" level="L" />
       <div class="tips">
-        <p>{{$t('qr_tips')}}</p>
+        <p>长按二维码，识别播放。</p>
         <p><img src="@/assets/image/logo.png"></p>
-        <p class="zy">{{$t('zy_tips')}}</p>
+        <p class="zy">『ZY Player』技术支持，严禁传播违法资源。</p>
       </div>
     </div>
     <div class="share-mask" v-show="loading">
@@ -19,21 +19,18 @@
 </template>
 <script>
 import { mapMutations } from 'vuex'
-import tools from '../lib/site/tools'
 import QrcodeVue from 'qrcode.vue'
 import html2canvas from 'html2canvas'
+import zy from '../lib/site/tools'
 const { clipboard, nativeImage } = require('electron')
 export default {
   name: 'share',
   data () {
     return {
-      card: {
-        img: '',
-        name: '',
-        png: ''
-      },
-      value: 'https://www.baidu.com',
-      loading: true
+      pic: '',
+      png: '',
+      link: '',
+      loading: false
     }
   },
   components: {
@@ -52,46 +49,50 @@ export default {
   watch: {
     share: {
       handler () {
-        this.getDetail()
+        this.getDetail(
+          this.loading = true
+        )
       },
       deep: true
     }
   },
   methods: {
     ...mapMutations(['SET_SHARE']),
-    getDetail () {
-      this.loading = true
-      tools.detail_get(this.share.v.site, this.share.v.detail).then(res => {
-        const info = res.info
-        const parser = new DOMParser()
-        const html = parser.parseFromString(info, 'text/html')
-        const img = html.querySelector('img').src
-        this.card.img = img
-        this.card.name = this.share.v.name
-        const urls = res.m3u8_urls
-        const url = urls[this.share.v.index].split('$')[1]
-        this.value = 'http://zyplayer.fun/player/player.html?url=' + url + '&title=' + this.share.v.name
-        this.loading = false
-        this.$nextTick(() => {
-          const dom = document.getElementById('share')
-          html2canvas(dom, { allowTaint: true, useCORS: true }).then(res => {
-            const png = res.toDataURL('image/png')
-            const p = nativeImage.createFromDataURL(png)
-            clipboard.writeImage(p)
-            this.$m.success(this.$t('share_tips'))
-            this.share.show = true
-          })
-        })
-      })
-    },
     shareClickEvent () {
       this.share = {
         show: false,
-        v: {}
+        info: {}
       }
+    },
+    getDetail () {
+      this.loading = true
+      const id = this.share.info.ids || this.share.info.id
+      zy.detail(this.share.key, id).then(res => {
+        if (res) {
+          this.pic = res.pic
+          const text = res.dl.dd
+          for (const i of text) {
+            if (i._flag.indexOf('m3u8') >= 0) {
+              const arr = i._t.split('#')
+              const url = arr[0].split('$')[1]
+              this.link = 'http://zyplayer.fun/player/player.html?url=' + url + '&title=' + this.share.info.name
+            }
+          }
+          this.loading = false
+          this.$nextTick(() => {
+            const dom = document.getElementById('share')
+            html2canvas(dom, { useCORS: true, allowTaint: true }).then(res => {
+              const png = res.toDataURL('image/png')
+              const p = nativeImage.createFromDataURL(png)
+              clipboard.writeImage(p)
+              this.$message.success('已复制到剪贴板，快去分享吧~ 严禁传播违法资源!!!')
+            })
+          })
+        }
+      })
     }
   },
-  created () {
+  mounted () {
     this.getDetail()
   }
 }
@@ -108,7 +109,7 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding: 20px;
-  z-index: 888;
+  z-index: 999;
   .left, .right{
     width: 50%;
     height: 100%;

src/components/Star.vue

@@ -1,51 +1,38 @@
 <template>
   <div class="star">
-    <div class="zy-table">
-      <div class="tHead">
-        <span class="name">{{$t('videoName')}}</span>
-        <span class="type">{{$t('type')}}</span>
-        <span class="time">{{$t('time')}}</span>
-        <span class="from">{{$t('from')}}</span>
-        <span class="operate" style="width: 170px">{{$t('operate')}}</span>
-      </div>
-      <div class="tBody zy-scroll">
-        <ul v-show="!loading">
-          <li v-for="(i, j) in data" :key="j" @click="detailEvent(i)">
-            <span class="name">{{i.name}}</span>
-            <span class="type">{{i.type}}</span>
-            <span class="time">{{i.time}}</span>
-            <span class="from">{{i.site | ftSite}}</span>
-            <span class="operate" style="width: 170px">
-              <span class="btn" @click.stop="playEvent(i)">{{$t('play')}}</span>
-              <span class="btn" @click.stop="deleteEvent(i)">{{$t('delete')}}</span>
-              <span class="btn" @click.stop="shareEvent(i)">{{$t('share')}}</span>
-              <span class="btn" @click.stop="updateEvent(i)">{{$t('sync')}}</span>
-            </span>
-          </li>
-        </ul>
-        <div class="tBody-mask" v-show="loading">
-          <div class="loader"></div>
+    <div class="body zy-scroll">
+      <div class="zy-table">
+        <div class="tBody">
+          <ul>
+            <li v-for="(i, j) in list" :key="j" @click="detailEvent(i)">
+              <span class="name">{{i.name}}</span>
+              <span class="type">{{i.type}}</span>
+              <span class="time">{{i.year}}</span>
+              <span class="from">{{i.site}}</span>
+              <span class="operate" style="width: 220px">
+                <span class="btn" @click.stop="playEvent(i)">播放</span>
+                <span class="btn" @click.stop="deleteEvent(i)">删除</span>
+                <span class="btn" @click.stop="shareEvent(i)">分享</span>
+                <span class="btn" @click.stop="updateEvent(i)">同步</span>
+                <span class="btn" @click.stop="downloadEvent(i)">下载</span>
+              </span>
+            </li>
+          </ul>
         </div>
       </div>
-      <div class="tFooter">
-        <span class="tFooter-span">{{data.length}} {{$t('total')}}</span>
-      </div>
     </div>
   </div>
 </template>
 <script>
 import { mapMutations } from 'vuex'
-import tools from '../lib/site/tools'
-import video from '../lib/dexie/video'
-import { sites, getSite } from '../lib/site/sites'
+import { star, history } from '../lib/dexie'
+import zy from '../lib/site/tools'
+const { clipboard } = require('electron')
 export default {
   name: 'star',
   data () {
     return {
-      sites: sites,
-      data: [],
-      loading: true,
-      checkFlag: false
+      list: []
     }
   },
   computed: {
@@ -57,14 +44,6 @@ export default {
         this.SET_VIEW(val)
       }
     },
-    detail: {
-      get () {
-        return this.$store.getters.getDetail
-      },
-      set (val) {
-        this.SET_DETAIL(val)
-      }
-    },
     video: {
       get () {
         return this.$store.getters.getVideo
@@ -73,6 +52,14 @@ export default {
         this.SET_VIDEO(val)
       }
     },
+    detail: {
+      get () {
+        return this.$store.getters.getDetail
+      },
+      set (val) {
+        this.SET_DETAIL(val)
+      }
+    },
     share: {
       get () {
         return this.$store.getters.getShare
@@ -82,15 +69,9 @@ export default {
       }
     }
   },
-  filters: {
-    ftSite (e) {
-      const name = getSite(e).name
-      return name
-    }
-  },
   watch: {
     view () {
-      this.getAllStar()
+      this.getStarList()
     }
   },
   methods: {
@@ -98,62 +79,111 @@ export default {
     detailEvent (e) {
       this.detail = {
         show: true,
-        v: e
+        key: e.site,
+        info: e
       }
     },
     playEvent (e) {
-      this.video = e
+      history.find({ site: e.site, ids: e.ids }).then(res => {
+        if (res) {
+          this.video = { key: res.site, info: { id: res.ids, name: res.name, index: res.index } }
+        } else {
+          this.video = { key: e.site, info: { id: e.ids, name: e.name, index: 0 } }
+        }
+      })
       this.view = 'Play'
     },
     deleteEvent (e) {
-      video.remove(e.id).then(res => {
+      star.remove(e.id).then(res => {
         if (res) {
-          this.$m.warning(this.$t('delete_failed'))
+          this.$message.warning('删除失败')
         } else {
-          this.$m.success(this.$t('delete_success'))
+          this.$message.success('删除成功')
         }
-        this.getAllStar()
+        this.getStarList()
       })
     },
     shareEvent (e) {
       this.share = {
         show: true,
-        v: e
+        key: e.site,
+        info: e
       }
     },
     updateEvent (e) {
-      tools.detail_get(e.site, e.detail).then(res => {
-        const nameOne = e.name.replace(/\s*/g, '')
-        const nameTwo = res.name.replace(/\s*/g, '')
-        if (nameOne === nameTwo) {
-          this.$m.info(this.$t('async_failed'))
+      zy.detail(e.site, e.ids).then(res => {
+        if (e.last === res.last) {
+          this.$message.info('同步成功, 未查询到更新。')
         } else {
-          const h = e
-          h.name = res.name
-          video.update(h.id, h).then(res => {
-            this.$m.success(this.$t('async_success'))
+          const doc = {
+            id: e.id,
+            ids: res.id,
+            last: res.last,
+            name: res.name,
+            site: e.site,
+            type: res.type,
+            year: res.year
+          }
+          star.update(e.id, doc).then(res => {
+            this.$message.success('同步成功, 检查到更新.')
           })
         }
+      }).catch(err => {
+        this.$message.warning('同步失败, 请重试', err)
+      })
+    },
+    downloadEvent (e) {
+      zy.download(e.site, e.ids).then(res => {
+        if (res) {
+          const text = res.dl.dd._t
+          if (text) {
+            const list = text.split('#')
+            let downloadUrl = ''
+            for (const i of list) {
+              const url = encodeURI(i.split('$')[1])
+              downloadUrl += (url + '\n')
+            }
+            clipboard.writeText(downloadUrl)
+            this.$message.success('『MP4』格式的链接已复制, 快去下载吧!')
+          } else {
+            this.$message.warning('没有查询到下载链接.')
+          }
+        } else {
+          const list = [...this.m3u8List]
+          let downloadUrl = ''
+          for (const i of list) {
+            const url = encodeURI(i.split('$')[1])
+            downloadUrl += (url + '\n')
+          }
+          clipboard.writeText(downloadUrl)
+          this.$message.success('『M3U8』格式的链接已复制, 快去下载吧!')
+        }
       })
     },
-    getAllStar () {
-      video.all().then(res => {
-        this.data = res.reverse()
-        this.loading = false
+    getStarList () {
+      star.all().then(res => {
+        this.list = res.reverse()
       })
     }
   },
   created () {
-    this.getAllStar()
+    this.getStarList()
   }
 }
 </script>
 <style lang="scss" scoped>
 .star{
-  height: 660px;
+  position: relative;
+  height: calc(100% - 40px);
   width: 100%;
   display: flex;
-  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   border-radius: 5px;
+  .body{
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  }
 }
 </style>

src/components/register.js

@@ -1,22 +1,22 @@
 import Vue from 'vue'
 import Aside from './Aside'
-import Detail from './Detail'
-import Film from './Film'
 import Frame from './Frame'
+import Film from './Film'
 import Play from './Play'
-import Setting from './Setting'
-import Share from './Share'
 import Star from './Star'
+import Setting from './Setting'
+import Detail from './Detail'
+import Share from './Share'
 
 export default {
   registerComponents () {
     Vue.component('Aside', Aside)
-    Vue.component('Detail', Detail)
-    Vue.component('Film', Film)
     Vue.component('Frame', Frame)
+    Vue.component('Film', Film)
     Vue.component('Play', Play)
-    Vue.component('Setting', Setting)
-    Vue.component('Share', Share)
     Vue.component('Star', Star)
+    Vue.component('Setting', Setting)
+    Vue.component('Detail', Detail)
+    Vue.component('Share', Share)
   }
 }

src/lib/cloud/index.js

@@ -1,32 +0,0 @@
-import setting from '../dexie/setting'
-
-const os = require('os')
-const macadress = require('macaddress')
-const AV = require('leancloud-storage')
-
-setting.find().then(res => {
-  const cloud = res.cloud
-  if (!cloud) {
-    macadress.one((err, mac) => {
-      if (err) {
-        return false
-      }
-      const system = os.hostname() + ' ' + os.type() + ' ' + os.arch()
-      AV.init({
-        appId: 'X6TRIcMjgOG7EJ0t1l5r9In1-gzGzoHsz',
-        appKey: 'JmkGF9UqkWGQNYDcJ2g1QV1b',
-        serverURL: 'https://x6tricmj.lc-cn-n1-shared.com'
-      })
-      const ZYPlayer = AV.Object.extend('ZYPlayer')
-      const zyPlayer = new ZYPlayer()
-      zyPlayer.set('os', system)
-      zyPlayer.set('mac', mac)
-      zyPlayer.save().then(e => {
-        const id = e.id
-        res.cloud = true
-        res.cloudKey = id
-        setting.update(res)
-      })
-    })
-  }
-})

src/lib/dexie/dexie.js

@@ -0,0 +1,24 @@
+import Dexie from 'dexie'
+import { setting, sites, localKey } from './initData'
+
+const db = new Dexie('zy')
+
+db.version(3).stores({
+  search: '++id, keywords',
+  setting: 'id, theme, site, shortcut, view',
+  shortcut: 'name, key, desc',
+  star: '++id, site, ids, name, type, year, index',
+  sites: '++id, key, name, json, xml, down, level',
+  history: '++id, site, ids, name, type, year, index, time',
+  mini: 'id, site, ids, name, index, time'
+})
+
+db.on('populate', () => {
+  db.setting.bulkAdd(setting)
+  db.sites.bulkAdd(sites)
+  db.shortcut.bulkAdd(localKey)
+})
+
+db.open()
+
+export default db

src/lib/dexie/history.js

@@ -1,4 +1,4 @@
-import db from './index'
+import db from './dexie'
 const { history } = db
 export default {
   async add (doc) {

src/lib/dexie/index.js

@@ -1,33 +1,17 @@
-import Dexie from 'dexie'
+import history from './history'
+import mini from './mini'
+import setting from './setting'
+import shortcut from './shortcut'
+import star from './star'
+import sites from './sites'
+import search from './search'
 
-const db = new Dexie('zy')
-
-db.version(1).stores({
-  theme: '++id, theme',
-  site: '++id, site',
-  video: '++id, name, type, time, detail, urls, index'
-})
-
-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',
-  mini: 'id, site, name, type, time, detail, index, currentTime'
-})
-
-const initData = [{
-  id: 0,
-  theme: 'light',
-  site: 'zuidazy',
-  language: 'zhCn',
-  cloud: false,
-  cloudKey: ''
-}]
-
-db.on('populate', () => {
-  db.setting.bulkAdd(initData)
-})
-
-db.open()
-
-export default db
+export {
+  history,
+  mini,
+  setting,
+  shortcut,
+  star,
+  sites,
+  search
+}