From 33eb09838a5eadba4bf21c3b37a60e6e6b05ab03 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Fri, 9 Aug 2019 14:41:59 +0800
Subject: [PATCH 001/123] refactor(browsingview): use browser view instead of
 webview

---
 .electron-vue/webpack.renderer.config.js      |   2 +
 src/main/index.js                             | 118 +++++-
 src/renderer/browsing.ts                      |  44 +++
 src/renderer/components/BrowsingPip.vue       | 147 +++++++
 src/renderer/components/BrowsingView.vue      | 359 ++++++++++--------
 .../BrowsingView/BrowsingFavicons.vue         |   9 +-
 .../BrowsingView/BrowsingHeader.vue           |  15 +-
 src/renderer/containers/LandingView.vue       |  12 +-
 src/renderer/main.ts                          |  10 +-
 static/pip/preload.js                         |   3 +-
 10 files changed, 538 insertions(+), 181 deletions(-)
 create mode 100644 src/renderer/browsing.ts
 create mode 100644 src/renderer/components/BrowsingPip.vue

diff --git a/.electron-vue/webpack.renderer.config.js b/.electron-vue/webpack.renderer.config.js
index 4e0a934ea5..0fd263281b 100644
--- a/.electron-vue/webpack.renderer.config.js
+++ b/.electron-vue/webpack.renderer.config.js
@@ -57,6 +57,7 @@ let rendererConfig = {
     about: path.join(__dirname, '../src/renderer/about.js'),
     labor: path.join(__dirname, '../src/renderer/labor.ts'),
     index: path.join(__dirname, '../src/renderer/main.ts'),
+    browsing: path.join(__dirname, '../src/renderer/browsing.ts'),
   },
   externals: [
     ...Object.keys(Object.assign({}, dependencies, optionalDependencies)).filter(d => !whiteListedModules.includes(d))
@@ -204,6 +205,7 @@ let rendererConfig = {
     new HtmlWebpackPlugin(generateHtmlWebpackPluginConfig('labor')),
     new HtmlWebpackPlugin(generateHtmlWebpackPluginConfig('about')),
     new HtmlWebpackPlugin(generateHtmlWebpackPluginConfig('preference')),
+    new HtmlWebpackPlugin(generateHtmlWebpackPluginConfig('browsing')),
     new webpack.HotModuleReplacementPlugin(),
     new ForkTsCheckerWebpackPlugin({ eslint: true }),
   ],
diff --git a/src/main/index.js b/src/main/index.js
index 434c00ac69..3c48dd400f 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -1,7 +1,7 @@
 // Be sure to call Sentry function as early as possible in the main process
 import '../shared/sentry';
 
-import { app, BrowserWindow, session, Tray, ipcMain, globalShortcut, nativeImage, splayerx, systemPreferences } from 'electron' // eslint-disable-line
+import { app, BrowserWindow, session, Tray, ipcMain, globalShortcut, nativeImage, splayerx, systemPreferences, BrowserView } from 'electron' // eslint-disable-line
 import { throttle, debounce, uniq } from 'lodash';
 import os from 'os';
 import path, {
@@ -64,6 +64,8 @@ let mainWindow = null;
 let laborWindow = null;
 let aboutWindow = null;
 let preferenceWindow = null;
+let browsingWindow = null;
+let browserViews = [];
 let tray = null;
 let needToRestore = false;
 let inited = false;
@@ -83,6 +85,9 @@ const aboutURL = process.env.NODE_ENV === 'development'
 const preferenceURL = process.env.NODE_ENV === 'development'
   ? 'http://localhost:9080/preference.html'
   : `file://${__dirname}/preference.html`;
+const browsingURL = process.env.NODE_ENV === 'development'
+  ? 'http://localhost:9080/browsing.html'
+  : `file://${__dirname}/browsing.html`;
 
 const tempFolderPath = path.join(app.getPath('temp'), 'splayer');
 if (!fs.existsSync(tempFolderPath)) fs.mkdirSync(tempFolderPath);
@@ -259,6 +264,35 @@ function createAboutWindow() {
   });
 }
 
+function createBrowsingWindow() {
+  const browsingWindowOptions = {
+    useContentSize: true,
+    frame: false,
+    titleBarStyle: 'none',
+    transparent: true,
+    movable: true,
+    webPreferences: {
+      webSecurity: false,
+      nodeIntegration: true,
+      experimentalFeatures: true,
+      webviewTag: true,
+    },
+    backgroundColor: '#6a6a6a',
+    acceptFirstMouse: false,
+    show: false,
+  };
+  if (!browsingWindow) {
+    browsingWindow = new BrowserWindow(browsingWindowOptions);
+    browsingWindow.loadURL(`${browsingURL}`);
+    browsingWindow.on('closed', () => {
+      browsingWindow = null;
+    });
+  }
+  browsingWindow.once('ready-to-show', () => {
+    // browsingWindow.show();
+  });
+}
+
 function createLaborWindow() {
   const laborWindowOptions = {
     show: false,
@@ -352,6 +386,13 @@ function registerMainWindowEvent(mainWindow) {
     }
   });
 
+  ipcMain.on('callBrowsingWindowMethod', (evt, method, args = []) => {
+    try {
+      browsingWindow[method](...args);
+    } catch (ex) {
+      console.error('callBrowsingWindowMethod', method, JSON.stringify(args), '\n', ex);
+    }
+  });
   ipcMain.on('callMainWindowMethod', (evt, method, args = []) => {
     try {
       mainWindow[method](...args);
@@ -359,6 +400,79 @@ function registerMainWindowEvent(mainWindow) {
       console.error('callMainWindowMethod', method, JSON.stringify(args), '\n', ex);
     }
   });
+  ipcMain.on('store-pip-info', () => {
+    mainWindow.send('store-pip-info', [
+      browsingWindow.getPosition()[0],
+      browsingWindow.getPosition()[1],
+      browsingWindow.getSize()[0],
+      browsingWindow.getSize()[1],
+    ]);
+  });
+  ipcMain.on('remove-pip-browser', () => { // close pip window
+    browsingWindow.removeBrowserView(browserViews[0]);
+    if (browserViews[0].webContents.canGoBack()) {
+      browserViews[0].webContents.goBack();
+    }
+    browsingWindow.hide();
+  });
+  ipcMain.on('remove-browser', (evt, isPip) => {
+    if (isPip) {
+      mainWindow.removeBrowserView(browserViews[1]);
+      browsingWindow.removeBrowserView(browserViews[0]);
+    } else {
+      mainWindow.removeBrowserView(browserViews[0]);
+    }
+    browserViews.forEach((view) => {
+      view.destroy();
+    });
+    browsingWindow.hide();
+  });
+  ipcMain.on('create-browser-view', (evt, args) => {
+    const isDestroyed = browserViews.filter(view => view.isDestroyed()).length;
+    if (!browserViews.length || isDestroyed) {
+      browserViews = [
+        new BrowserView({
+          webPreferences: {
+            preload: `${require('path').resolve(__static, 'pip/preload.js')}`,
+          },
+        }),
+        new BrowserView({
+          webPreferences: {
+            preload: `${require('path').resolve(__static, 'pip/preload.js')}`,
+          },
+        }),
+      ];
+    }
+    mainWindow.addBrowserView(browserViews[0]);
+    browserViews.forEach((view) => {
+      view.webContents.loadURL(args.url);
+      view.webContents.openDevTools();
+    });
+  });
+  ipcMain.on('enter-pip', () => {
+    if (!browsingWindow) {
+      createBrowsingWindow();
+    }
+    browsingWindow.show();
+    browsingWindow.openDevTools();
+    mainWindow.removeBrowserView(browserViews[0]);
+    browsingWindow.removeBrowserView(browserViews[1]);
+    mainWindow.addBrowserView(browserViews[1]);
+    browsingWindow.addBrowserView(browserViews[0]);
+  });
+  ipcMain.on('exit-pip', () => {
+    mainWindow.removeBrowserView(browserViews[1]);
+    browsingWindow.removeBrowserView(browserViews[0]);
+    if (browserViews[1].webContents.canGoBack()) {
+      browserViews[1].webContents.goBack();
+    }
+    mainWindow.addBrowserView(browserViews[0]);
+    browsingWindow.addBrowserView(browserViews[1]);
+    browsingWindow.hide();
+  });
+  ipcMain.on('update-header-to-show', (e, headerToShow) => {
+    mainWindow.send('update-header-to-show', headerToShow);
+  });
   ipcMain.on('update-route-name', (e, route) => {
     routeName = route;
   });
@@ -411,6 +525,7 @@ function registerMainWindowEvent(mainWindow) {
     app.quit();
   });
   ipcMain.on('add-preference', createPreferenceWindow);
+  ipcMain.on('add-browsing', createBrowsingWindow);
   ipcMain.on('preference-to-main', (e, args) => {
     if (mainWindow && !mainWindow.webContents.isDestroyed()) {
       mainWindow.webContents.send('mainDispatch', 'setPreference', args);
@@ -714,6 +829,7 @@ app.on('web-contents-created', (webContentsCreatedEvent, contents) => {
 
 app.on('bossKey', handleBossKey);
 app.on('add-preference', createPreferenceWindow);
+app.on('add-browsing', createBrowsingWindow);
 app.on('add-windows-about', createAboutWindow);
 
 app.on('menu-create-main-window', () => {
diff --git a/src/renderer/browsing.ts b/src/renderer/browsing.ts
new file mode 100644
index 0000000000..c0b5b16fb5
--- /dev/null
+++ b/src/renderer/browsing.ts
@@ -0,0 +1,44 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import VueI18n from 'vue-i18n';
+import { hookVue } from '@/kerning';
+// @ts-ignore
+import BrowsingPip from '@/components/BrowsingPip.vue';
+import store from '@/store';
+
+hookVue(Vue);
+Vue.use(VueI18n);
+Vue.use(Vuex);
+
+Vue.prototype.$bus = new Vue(); // Global event bus
+Vue.directive('fade-in', {
+  bind(el: HTMLElement, binding: unknown) {
+    if (!el) return;
+    const { value } = binding as { value: unknown };
+    if (value) {
+      el.classList.add('fade-in');
+      el.classList.remove('fade-out');
+    } else {
+      el.classList.add('fade-out');
+      el.classList.remove('fade-in');
+    }
+  },
+  update(el: HTMLElement, binding) {
+    const { oldValue, value } = binding;
+    if (oldValue !== value) {
+      if (value) {
+        el.classList.add('fade-in');
+        el.classList.remove('fade-out');
+      } else {
+        el.classList.add('fade-out');
+        el.classList.remove('fade-in');
+      }
+    }
+  },
+});
+new Vue({
+  components: { BrowsingPip },
+  data: {},
+  store,
+  template: '<BrowsingPip/>',
+}).$mount('#app');
diff --git a/src/renderer/components/BrowsingPip.vue b/src/renderer/components/BrowsingPip.vue
new file mode 100644
index 0000000000..9c6ef23bca
--- /dev/null
+++ b/src/renderer/components/BrowsingPip.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="pip" />
+</template>
+
+<script lang="ts">
+// @ts-ignore
+import urlParseLax from 'url-parse-lax';
+import electron from 'electron';
+
+export default {
+  name: 'BrowsingPip',
+  data() {
+    return {
+      supportedRecordHost: ['www.youtube.com', 'www.bilibili.com', 'www.iqiyi.com'],
+    };
+  },
+  computed: {
+    currentBrowserView() {
+      return electron.remote.BrowserView.getAllViews()[0];
+    },
+  },
+  mounted() {
+    window.addEventListener('beforeunload', () => {
+      electron.ipcRenderer.send('remove-pip-browser');
+    });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.currentBrowserView.webContents.addListener('ipc-message', (evt: any, channel: string, args: any) => { // https://github.com/electron/typescript-definitions/issues/27 fixed in 6.0.0
+      switch (channel) {
+        case 'open-url':
+          this.handleOpenUrl(args);
+          break;
+        case 'dragover':
+        case 'dragleave':
+          this.maskToShow = args.dragover;
+          break;
+        case 'drop':
+          this.maskToShow = false;
+          if ((args.files as string[]).length) {
+            this.currentBrowserView.setBounds({
+              x: 0, y: 36, width: 0, height: 0,
+            });
+            this.dropFiles = args.files;
+          }
+          break;
+        case 'mousemove':
+          if (this.isPip) {
+            this.timeout = true;
+            if (this.timer) {
+              clearTimeout(this.timer);
+            }
+            this.timer = setTimeout(() => {
+              this.timeout = false;
+            }, 3000);
+          }
+          break;
+        case 'left-drag':
+          if (this.isPip) {
+            if (args.windowSize) {
+              electron.ipcRenderer.send('callBrowsingWindowMethod', 'setBounds', [{
+                x: args.x,
+                y: args.y,
+                width: args.windowSize[0],
+                height: args.windowSize[1],
+              }]);
+            } else {
+              electron.ipcRenderer.send('callBrowsingWindowMethod', 'setPosition', [args.x, args.y]);
+            }
+          }
+          break;
+        case 'fullscreenchange':
+          electron.ipcRenderer.send('update-header-to-show', !args.isFullScreen);
+          break;
+        case 'keydown':
+          if (['INPUT', 'TEXTAREA'].includes(args.targetName as string)) {
+            this.acceleratorAvailable = false;
+          }
+          break;
+        default:
+          console.warn(`Unhandled ipc-message: ${channel}`, args);
+          break;
+      }
+    });
+    this.currentBrowserView.webContents.addListener('dom-ready', () => { // for webview test
+      window.focus();
+      this.currentBrowserView.webContents.focus();
+      if (process.env.NODE_ENV === 'development') this.currentBrowserView.webContents.openDevTools();
+    });
+    // https://github.com/electron/typescript-definitions/issues/27 fixed in 6.0.0
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.currentBrowserView.webContents.addListener('new-window', (e: any, url: string, disposition: string) => {
+      if (disposition !== 'new-window') {
+        this.handleOpenUrl({ url });
+      }
+    });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.currentBrowserView.webContents.addListener('did-start-navigation', (e: any, url: string) => {
+      if (!url || url === 'about:blank') return;
+      this.startTime = new Date().getTime();
+      this.loadingState = true;
+      const loadUrl = this.currentBrowserView.webContents.getURL();
+      this.currentUrl = loadUrl;
+      const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
+      if (recordIndex !== -1) {
+        switch (recordIndex) {
+          case 0:
+            // this.updateRecordUrl({ youtube: loadUrl });
+            break;
+          case 1:
+            // this.updateRecordUrl({ bilibili: loadUrl });
+            break;
+          case 2:
+            // this.updateRecordUrl({ iqiyi: loadUrl });
+            break;
+          default:
+            break;
+        }
+      }
+    });
+    this.currentBrowserView.webContents.addListener('did-stop-loading', () => {
+      const loadingTime: number = new Date().getTime() - this.startTime;
+      if (loadingTime % 3000 === 0) {
+        this.loadingState = false;
+      } else {
+        setTimeout(() => {
+          this.loadingState = false;
+        }, 3000 - (loadingTime % 3000));
+      }
+    });
+  },
+  methods: {
+    handleOpenUrl({ url }: { url: string }) {
+      if (!url || url === 'about:blank') return;
+      this.currentBrowserView.webContents.loadURL(urlParseLax(url).protocol ? url : `https:${url}`);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.pip {
+  width: 100%;
+  height: 10px;
+  -webkit-app-region: drag;
+  position: absolute;
+  top: 0;
+}
+</style>
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 5b64c807c1..c103379b7a 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -1,6 +1,9 @@
 <template>
   <div
-    :style="{ pointerEvents: isFocused ? 'auto' : 'none' }"
+    :style="{
+      pointerEvents: isFocused ? 'auto' : 'none',
+      webkitAppRegion: 'no-drag',
+    }"
     class="browsing"
   >
     <browsing-header
@@ -9,7 +12,8 @@
       :handle-url-reload="handleUrlReload"
       :handle-url-back="handleUrlBack"
       :handle-url-forward="handleUrlForward"
-      v-show="!isPip && headerToShow"
+      :style="{ webkitAppRegion: 'drag' }"
+      v-show="headerToShow"
     />
     <div
       :style="{
@@ -22,7 +26,7 @@
       v-show="maskToShow"
     />
     <div
-      v-show="loadingState && !isPip && headerToShow"
+      v-show="loadingState && headerToShow"
       class="loading-state loading-animation"
     />
     <div
@@ -48,17 +52,7 @@
         type="pipBack"
       />
     </div>
-    <webview
-      ref="webView"
-      :src="availableUrl"
-      :style="{ webkitAppRegion: isPip && isDarwin ? 'drag' : 'no-drag' }"
-      :preload="preload"
-      autosize
-      class="web-view"
-      allowpopups
-      webpreferences="nativeWindowOpen=yes"
-    />
-    <NotificationBubble/>
+    <NotificationBubble />
   </div>
 </template>
 
@@ -136,24 +130,20 @@ export default {
     othersPip() {
       return globalPip(this.winSize);
     },
-    availableUrl() {
-      const parsedUrl = urlParseLax(this.initialUrl);
-      return parsedUrl.protocol ? parsedUrl.href : `http://${this.initialUrl}`;
-    },
     danmuType() {
       return this.barrageOpen ? 'danmu' : 'noDanmu';
     },
     danmuIconState() {
       return ['youtube', 'others'].includes(this.pipType) || (this.pipType === 'bilibili' && this.bilibiliType === 'others') ? 0.2 : 1;
     },
+    currentBrowserView() {
+      return this.$electron.remote.BrowserView.getAllViews()[1];
+    },
+    currentPipBrowserView() {
+      return this.$electron.remote.BrowserView.getAllViews()[0];
+    },
   },
   watch: {
-    isFullScreen(val: string) {
-      if (!val) {
-        this.headerToShow = true;
-        this.$refs.webView.executeJavaScript('document.webkitCancelFullScreen();');
-      }
-    },
     dropFiles(val: string[]) {
       this.backToLandingView = false;
       const onlyFolders = val.every((file: fs.PathLike) => fs.statSync(file).isDirectory());
@@ -172,11 +162,11 @@ export default {
     isPip(val: boolean) {
       this.menuService.updatePip(val);
       this.$electron.ipcRenderer.send('update-enabled', 'window.pip', true);
-      this.$electron.ipcRenderer.send('update-enabled', 'history.back', !val && this.$refs.webView.canGoBack());
-      this.$electron.ipcRenderer.send('update-enabled', 'history.forward', !val && this.$refs.webView.canGoForward());
+      this.$electron.ipcRenderer.send('update-enabled', 'history.back', !val && this.currentBrowserView.webContents.canGoBack());
+      this.$electron.ipcRenderer.send('update-enabled', 'history.forward', !val && this.currentBrowserView.webContents.canGoForward());
       if (!val) {
-        this.$store.dispatch('updatePipSize', this.winSize);
-        this.$store.dispatch('updatePipPos', this.winPos);
+        this.$electron.ipcRenderer.send('exit-pip');
+        this.$electron.ipcRenderer.send('store-pip-info');
         this.$electron.ipcRenderer.send('update-enabled', 'window.keepPlayingWindowFront', false);
         this.handleWindowChangeExitPip();
         if (this.pipType === 'youtube') {
@@ -189,6 +179,7 @@ export default {
           this.othersRecover();
         }
       } else {
+        this.$electron.ipcRenderer.send('enter-pip');
         this.$store.dispatch('updateBrowsingSize', this.winSize);
         this.$store.dispatch('updateBrowsingPos', this.winPos);
         this.$electron.ipcRenderer.send('update-enabled', 'window.keepPlayingWindowFront', true);
@@ -214,33 +205,46 @@ export default {
       }
     },
     loadingState(val: boolean) {
-      const loadUrl = this.$refs.webView.getURL();
+      const loadUrl = this.currentBrowserView.webContents.getURL();
       const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
-      this.$electron.ipcRenderer.send('update-enabled', 'history.back', this.$refs.webView.canGoBack());
-      this.$electron.ipcRenderer.send('update-enabled', 'history.forward', this.$refs.webView.canGoForward());
+      this.$electron.ipcRenderer.send('update-enabled', 'history.back', this.currentBrowserView.webContents.canGoBack());
+      this.$electron.ipcRenderer.send('update-enabled', 'history.forward', this.currentBrowserView.webContents.canGoForward());
       if (val) {
         this.hasVideo = false;
         this.$electron.ipcRenderer.send('update-enabled', 'window.pip', false);
         this.$refs.browsingHeader.updateWebInfo({
           hasVideo: this.hasVideo,
           url: loadUrl,
-          canGoBack: this.$refs.webView.canGoBack(),
-          canGoForward: this.$refs.webView.canGoForward(),
+          canGoBack: this.currentBrowserView.webContents.canGoBack(),
+          canGoForward: this.currentBrowserView.webContents.canGoForward(),
         });
       } else {
         if (this.pipRestore) {
           this.pipAdapter();
           this.pipRestore = false;
         }
-        this.$refs.webView.executeJavaScript(this.calculateVideoNum, (r: number) => {
-          this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
-          this.$electron.ipcRenderer.send('update-enabled', 'window.pip', this.hasVideo);
-          this.$refs.browsingHeader.updateWebInfo({
-            hasVideo: this.hasVideo,
-            url: loadUrl,
-            canGoBack: this.$refs.webView.canGoBack(),
-            canGoForward: this.$refs.webView.canGoForward(),
+        this.currentBrowserView.webContents
+          .executeJavaScript(this.calculateVideoNum, (r: number) => {
+            this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
+            this.$electron.ipcRenderer.send('update-enabled', 'window.pip', this.hasVideo);
+            this.$refs.browsingHeader.updateWebInfo({
+              hasVideo: this.hasVideo,
+              url: loadUrl,
+              canGoBack: this.currentBrowserView.webContents.canGoBack(),
+              canGoForward: this.currentBrowserView.webContents.canGoForward(),
+            });
           });
+      }
+    },
+    headerToShow(val: boolean) {
+      const currentView = this.isPip ? this.currentPipBrowserView : this.currentBrowserView;
+      if (!val) {
+        currentView.setBounds({
+          x: 0, y: 0, width: window.screen.width, height: window.screen.height,
+        });
+      } else {
+        currentView.setBounds({
+          x: 0, y: 36, width: this.browsingSize[0], height: this.browsingSize[1],
         });
       }
     },
@@ -254,6 +258,10 @@ export default {
     );
     this.$store.dispatch('updateBrowsingPos', this.winPos);
     this.$electron.ipcRenderer.send('callMainWindowMethod', 'setAspectRatio', [0]);
+    this.currentBrowserView.setBounds({
+      x: 0, y: 36, width: this.browsingSize[0], height: this.browsingSize[1] - 36,
+    });
+    this.currentBrowserView.setAutoResize({ width: true, height: true });
   },
   mounted() {
     this.menuService = new MenuService();
@@ -271,10 +279,15 @@ export default {
       }, 0);
     });
     window.addEventListener('beforeunload', (e: BeforeUnloadEvent) => {
+      this.$electron.ipcRenderer.send('remove-browser', this.isPip);
       if (!this.asyncTasksDone) {
         e.returnValue = false;
-        this.$store.dispatch(this.isPip ? 'updatePipSize' : 'updateBrowsingSize', this.winSize);
-        this.$store.dispatch(this.isPip ? 'updatePipPos' : 'updateBrowsingPos', this.winPos);
+        if (this.isPip) {
+          this.$electron.ipcRenderer.send('store-pip-info');
+        } else {
+          this.$store.dispatch('updateBrowsingSize', this.winSize);
+          this.$store.dispatch('updateBrowsingPos', this.winPos);
+        }
         asyncStorage.set('browsing', {
           pipSize: this.pipSize,
           pipPos: this.pipPos,
@@ -312,54 +325,32 @@ export default {
     });
     this.$bus.$on('back-to-landingview', () => {
       this.backToLandingView = true;
+      this.$bus.$off();
       this.$router.push({
         name: 'landing-view',
       });
     });
-    this.$refs.webView.addEventListener('load-commit', () => {
-      const loadUrl = this.$refs.webView.getURL();
-      this.currentUrl = loadUrl;
-      const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
-      if (recordIndex !== -1) {
-        switch (recordIndex) {
-          case 0:
-            this.updateRecordUrl({ youtube: loadUrl });
-            break;
-          case 1:
-            this.updateRecordUrl({ bilibili: loadUrl });
-            break;
-          case 2:
-            this.updateRecordUrl({ iqiyi: loadUrl });
-            break;
-          default:
-            break;
-        }
-      }
+    this.$electron.ipcRenderer.on('store-pip-info', (e: Event, info: number[]) => {
+      this.$store.dispatch('updatePipSize', info.slice(2, 4));
+      this.$store.dispatch('updatePipPos', info.slice(0, 2));
     });
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    this.$refs.webView.addEventListener('ipc-message', (evt: any) => { // https://github.com/electron/typescript-definitions/issues/27 fixed in 6.0.0
-      const { channel, args }: { channel: string, args:
-      { dragover?: boolean,
-        files?: string[],
-        isFullScreen?: boolean,
-        windowSize?: number[] | null,
-        x?: number,
-        y?: number,
-        url?: string,
-        targetName?: string,
-      }[] } = evt;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any,complexity
+    this.currentBrowserView.webContents.addListener('ipc-message', (evt: any, channel: string, args: any) => { // https://github.com/electron/typescript-definitions/issues/27 fixed in 6.0.0
       switch (channel) {
         case 'open-url':
-          this.handleOpenUrl(args[0]);
+          this.handleOpenUrl(args);
           break;
         case 'dragover':
         case 'dragleave':
-          this.maskToShow = args[0].dragover;
+          this.maskToShow = args.dragover;
           break;
         case 'drop':
           this.maskToShow = false;
-          if ((args[0].files as string[]).length) {
-            this.dropFiles = args[0].files;
+          if ((args.files as string[]).length) {
+            this.currentBrowserView.setBounds({
+              x: 0, y: 36, width: 0, height: 0,
+            });
+            this.dropFiles = args.files;
           }
           break;
         case 'mousemove':
@@ -375,23 +366,25 @@ export default {
           break;
         case 'left-drag':
           if (this.isPip) {
-            if (args[0].windowSize) {
-              this.$electron.ipcRenderer.send('callMainWindowMethod', 'setBounds', [{
-                x: args[0].x,
-                y: args[0].y,
-                width: args[0].windowSize[0],
-                height: args[0].windowSize[1],
+            if (args.windowSize) {
+              this.$electron.ipcRenderer.send('callBrowsingWindowMethod', 'setBounds', [{
+                x: args.x,
+                y: args.y,
+                width: args.windowSize[0],
+                height: args.windowSize[1],
               }]);
             } else {
-              this.$electron.ipcRenderer.send('callMainWindowMethod', 'setPosition', [args[0].x, args[0].y]);
+              this.$electron.ipcRenderer.send('callBrowsingWindowMethod', 'setPosition', [args.x, args.y]);
             }
           }
           break;
         case 'fullscreenchange':
-          this.headerToShow = !args[0].isFullScreen;
+          if (!this.isPip) {
+            this.headerToShow = !args.isFullScreen;
+          }
           break;
         case 'keydown':
-          if (['INPUT', 'TEXTAREA'].includes(args[0].targetName as string)) {
+          if (['INPUT', 'TEXTAREA'].includes(args.targetName as string)) {
             this.acceleratorAvailable = false;
           }
           break;
@@ -403,23 +396,50 @@ export default {
     this.$electron.ipcRenderer.on('quit', () => {
       this.quit = true;
     });
-    this.$refs.webView.addEventListener('dom-ready', () => { // for webview test
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.$electron.ipcRenderer.on('update-header-to-show', (ev: any, headerToShow: boolean) => {
+      this.headerToShow = headerToShow;
+    });
+    this.$electron.ipcRenderer.on('quit-pip', () => {
+      this.isPip = false;
+    });
+    this.currentBrowserView.webContents.addListener('dom-ready', () => { // for webview test
       window.focus();
-      this.$refs.webView.focus();
-      if (process.env.NODE_ENV === 'development') this.$refs.webView.openDevTools();
+      this.currentBrowserView.webContents.focus();
+      if (process.env.NODE_ENV === 'development') this.currentBrowserView.webContents.openDevTools();
     });
     // https://github.com/electron/typescript-definitions/issues/27 fixed in 6.0.0
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    this.$refs.webView.addEventListener('new-window', (e: any) => {
-      if (e.disposition !== 'new-window') {
-        this.handleOpenUrl(e);
+    this.currentBrowserView.webContents.addListener('new-window', (e: any, url: string, disposition: string) => {
+      if (disposition !== 'new-window') {
+        this.handleOpenUrl({ url });
       }
     });
-    this.$refs.webView.addEventListener('did-start-loading', () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.currentBrowserView.webContents.addListener('did-start-navigation', (e: any, url: string) => {
+      if (!url || url === 'about:blank') return;
       this.startTime = new Date().getTime();
       this.loadingState = true;
+      const loadUrl = this.currentBrowserView.webContents.getURL();
+      this.currentUrl = loadUrl;
+      const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
+      if (recordIndex !== -1) {
+        switch (recordIndex) {
+          case 0:
+            this.updateRecordUrl({ youtube: loadUrl });
+            break;
+          case 1:
+            this.updateRecordUrl({ bilibili: loadUrl });
+            break;
+          case 2:
+            this.updateRecordUrl({ iqiyi: loadUrl });
+            break;
+          default:
+            break;
+        }
+      }
     });
-    this.$refs.webView.addEventListener('did-stop-loading', () => {
+    this.currentBrowserView.webContents.addListener('did-stop-loading', () => {
       const loadingTime: number = new Date().getTime() - this.startTime;
       if (loadingTime % 3000 === 0) {
         this.loadingState = false;
@@ -431,6 +451,7 @@ export default {
     });
   },
   beforeDestroy() {
+    this.$electron.ipcRenderer.send('remove-browser', this.isPip);
     asyncStorage.set('browsing', {
       pipSize: this.pipSize,
       pipPos: this.pipPos,
@@ -438,8 +459,12 @@ export default {
       browsingPos: this.browsingPos,
       barrageOpen: this.barrageOpen,
     }).then(() => {
-      this.$store.dispatch(this.isPip ? 'updatePipSize' : 'updateBrowsingSize', this.winSize);
-      this.$store.dispatch(this.isPip ? 'updatePipPos' : 'updateBrowsingPos', this.winPos);
+      if (this.isPip) {
+        this.$electron.ipcRenderer.send('store-pip-info');
+      } else {
+        this.$store.dispatch('updateBrowsingSize', this.winSize);
+        this.$store.dispatch('updateBrowsingPos', this.winPos);
+      }
       this.updateIsPip(false);
     }).finally(() => {
       if (this.backToLandingView) {
@@ -449,7 +474,6 @@ export default {
   },
   methods: {
     ...mapActions({
-      updateInitialUrl: browsingActions.UPDATE_INITIAL_URL,
       updateRecordUrl: browsingActions.UPDATE_RECORD_URL,
       updateBarrageOpen: browsingActions.UPDATE_BARRAGE_OPEN,
       updateIsPip: browsingActions.UPDATE_IS_PIP,
@@ -459,7 +483,7 @@ export default {
       if (this.isPip) {
         this.updateIsPip(false);
       }
-      this.updateInitialUrl(url);
+      this.currentBrowserView.webContents.loadURL(urlParseLax(url).protocol ? url : `https:${url}`);
     },
     pipAdapter() {
       const parseUrl = urlParseLax(this.currentUrl);
@@ -488,71 +512,94 @@ export default {
       this.pipBtnsKeepShow = false;
     },
     handleWindowChangeEnterPip() {
-      const newDisplayId = this.$electron.screen
+      const newDisplayId = this.$electron.remote.screen
         .getDisplayNearestPoint({ x: this.winPos[0], y: this.winPos[1] }).id;
       const useDefaultPosition = !this.pipPos.length || this.oldDisplayId !== newDisplayId;
       this.oldDisplayId = newDisplayId;
-      this.$refs.webView.executeJavaScript(this.getVideoStyle, (result: CSSStyleDeclaration) => {
-        const videoAspectRatio = parseFloat(result.width as string)
-          / parseFloat(result.height as string);
-        this.$electron.ipcRenderer.send('callMainWindowMethod', 'setAspectRatio', [videoAspectRatio]);
-        this.$electron.ipcRenderer.send('callMainWindowMethod', 'setMinimumSize', [420, Math.round(420 / videoAspectRatio)]);
-        if (useDefaultPosition) {
-          this.$store.dispatch('updatePipPos', [window.screen.availLeft + 70,
-            window.screen.availTop + window.screen.availHeight - 236 - 70])
-            .then(() => {
-              this.$electron.ipcRenderer.send('callMainWindowMethod', 'setPosition', [window.screen.availLeft + 70,
-                window.screen.availTop + window.screen.availHeight - 236 - 70]);
-            });
-        } else {
-          this.$electron.ipcRenderer.send('callMainWindowMethod', 'setPosition', this.pipPos);
-        }
-        const calculateSize = this.pipSize[0] / this.pipSize[1] >= videoAspectRatio
-          ? [this.pipSize[0], Math.round(this.pipSize[0] / videoAspectRatio)]
-          : [Math.round(this.pipSize[1] * videoAspectRatio), this.pipSize[1]];
-        this.$electron.ipcRenderer.send('callMainWindowMethod', 'setSize', calculateSize);
+      this.currentPipBrowserView.setBounds({
+        x: 0, y: 36, width: this.winSize[0], height: this.winSize[1] - 36,
       });
+      this.currentPipBrowserView.setAutoResize({ width: true, height: true });
+      this.currentBrowserView.webContents
+        .executeJavaScript(this.getVideoStyle, (result: CSSStyleDeclaration) => {
+          const videoAspectRatio = parseFloat(result.width as string)
+            / parseFloat(result.height as string);
+          this.$electron.ipcRenderer.send('callBrowsingWindowMethod', 'setAspectRatio', [videoAspectRatio]);
+          this.$electron.ipcRenderer.send('callBrowsingWindowMethod', 'setMinimumSize', [420, Math.round(420 / videoAspectRatio)]);
+          if (useDefaultPosition) {
+            this.$store.dispatch('updatePipPos', [window.screen.availLeft + 70,
+              window.screen.availTop + window.screen.availHeight - 236 - 70])
+              .then(() => {
+                this.$electron.ipcRenderer.send('callBrowsingWindowMethod', 'setPosition', [window.screen.availLeft + 70,
+                  window.screen.availTop + window.screen.availHeight - 236 - 70]);
+              });
+          } else {
+            this.$electron.ipcRenderer.send('callBrowsingWindowMethod', 'setPosition', this.pipPos);
+          }
+          const calculateSize = this.pipSize[0] / this.pipSize[1] >= videoAspectRatio
+            ? [this.pipSize[0], Math.round(this.pipSize[0] / videoAspectRatio)]
+            : [Math.round(this.pipSize[1] * videoAspectRatio), this.pipSize[1]];
+          this.$electron.ipcRenderer.send('callBrowsingWindowMethod', 'setSize', calculateSize);
+          this.currentBrowserView.setBounds({
+            x: 0, y: 0, width: calculateSize[0], height: calculateSize[1],
+          });
+        });
     },
     handleWindowChangeExitPip() {
-      const newDisplayId = this.$electron.screen
+      const newDisplayId = this.$electron.remote.screen
         .getDisplayNearestPoint({ x: this.winPos[0], y: this.winPos[1] }).id;
-      if (this.oldDisplayId !== newDisplayId) {
-        windowRectService.calculateWindowRect(
-          this.browsingSize,
-          true,
-          this.winPos.concat(this.winSize),
-        );
-      } else {
-        this.$electron.ipcRenderer.send('callMainWindowMethod', 'setSize', this.browsingSize);
-        this.$electron.ipcRenderer.send('callMainWindowMethod', 'setPosition', this.browsingPos);
-      }
+      this.currentBrowserView.setAutoResize({ width: false, height: false });
+      this.currentBrowserView.setBounds({
+        x: 0, y: 36, width: this.winSize[0], height: this.winSize[1] - 36,
+      });
+      // if (this.oldDisplayId !== newDisplayId) {
+      //   windowRectService.calculateWindowRect(
+      //     this.browsingSize,
+      //     true,
+      //     this.winPos.concat(this.winSize),
+      //   );
+      // } else {
+      //   this.$electron.ipcRenderer.send('callMainWindowMethod', 'setSize', this.browsingSize);
+      //   this.$electron.ipcRenderer.send('callMainWindowMethod', 'setPosition', this.browsingPos);
+      // }
       this.oldDisplayId = newDisplayId;
-      this.$electron.ipcRenderer.send('callMainWindowMethod', 'setAspectRatio', [0]);
-      this.$electron.ipcRenderer.send('callMainWindowMethod', 'setMinimumSize', [570, 375]);
+      // this.$electron.ipcRenderer.send('callMainWindowMethod', 'setAspectRatio', [0]);
+      // this.$electron.ipcRenderer.send('callMainWindowMethod', 'setMinimumSize', [570, 375]);
+      this.currentBrowserView.setAutoResize({ width: true, height: true });
     },
     handleDanmuDisplay() {
       if (this.pipType === 'iqiyi') {
         this.updateBarrageOpen(!this.barrageOpen);
-        this.$refs.webView.executeJavaScript(this.iqiyiBarrage);
+        this.currentBrowserView.webContents.executeJavaScript(this.iqiyiBarrage);
       } else if (this.pipType === 'bilibili') {
         this.updateBarrageOpen(!this.barrageOpen);
-        this.$refs.webView.executeJavaScript(this.bilibiliBarrage);
+        this.currentBrowserView.webContents.executeJavaScript(this.bilibiliBarrage);
       }
     },
     handleUrlForward() {
-      if (this.$refs.webView.canGoForward()) {
-        this.$refs.webView.goForward();
+      if (!this.isPip) {
+        if (this.currentBrowserView.webContents.canGoForward()) {
+          this.currentBrowserView.webContents.goForward();
+        }
+      } else if (this.currentPipBrowserView.webContents.canGoForward()) {
+        this.currentPipBrowserView.webContents.goForward();
       }
     },
     handleUrlBack() {
-      if (this.$refs.webView.canGoBack()) {
-        this.$refs.webView.goBack();
+      if (!this.isPip) {
+        if (this.currentBrowserView.webContents.canGoBack()) {
+          this.currentBrowserView.webContents.goBack();
+        }
+      } else if (this.currentPipBrowserView.webContents.canGoBack()) {
+        this.currentPipBrowserView.webContents.goBack();
       }
     },
     handleUrlReload() {
-      this.$refs.webView.reload();
       if (this.isPip) {
         this.pipRestore = true;
+        this.currentPipBrowserView.webContents.reload();
+      } else {
+        this.currentBrowserView.webContents.reload();
       }
     },
     handleEnterPip() {
@@ -567,44 +614,45 @@ export default {
     },
     othersAdapter() {
       this.handleWindowChangeEnterPip();
-      this.$refs.webView.executeJavaScript(this.othersPip.adapter);
+      this.currentBrowserView.webContents.executeJavaScript(this.othersPip.adapter);
     },
     othersWatcher() {
-      this.$refs.webView.executeJavaScript(this.othersPip.watcher);
+      this.currentBrowserView.webContents.executeJavaScript(this.othersPip.watcher);
     },
     othersRecover() {
-      this.$refs.webView.executeJavaScript(this.othersPip.recover);
+      this.currentBrowserView.webContents.executeJavaScript(this.othersPip.recover);
     },
     iqiyiAdapter() {
       this.handleWindowChangeEnterPip();
-      this.$refs.webView.executeJavaScript(this.iqiyiPip.adapter);
+      this.currentBrowserView.webContents.executeJavaScript(this.iqiyiPip.adapter);
     },
     iqiyiWatcher() {
-      this.$refs.webView.executeJavaScript(this.iqiyiPip.watcher);
+      this.currentBrowserView.webContents.executeJavaScript(this.iqiyiPip.watcher);
     },
     iqiyiRecover() {
-      this.$refs.webView.executeJavaScript(this.iqiyiPip.recover);
+      this.currentBrowserView.webContents.executeJavaScript(this.iqiyiPip.recover);
     },
     youtubeAdapter() {
       this.handleWindowChangeEnterPip();
-      this.$refs.webView.executeJavaScript(youtube.adapter);
+      this.currentBrowserView.webContents.executeJavaScript(youtube.adapter);
     },
     youtubeRecover() {
-      this.$refs.webView.executeJavaScript(youtube.recover);
+      this.currentBrowserView.webContents.executeJavaScript(youtube.recover);
     },
     bilibiliAdapter() {
-      this.$refs.webView.executeJavaScript(bilibiliFindType, (r: (HTMLElement | null)[]) => {
-        this.bilibiliType = ['bangumi', 'videoStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
-      }).then(() => {
-        this.handleWindowChangeEnterPip();
-        this.$refs.webView.executeJavaScript(this.bilibiliPip.adapter);
-      });
+      this.currentBrowserView.webContents
+        .executeJavaScript(bilibiliFindType, (r: (HTMLElement | null)[]) => {
+          this.bilibiliType = ['bangumi', 'videoStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
+        }).then(() => {
+          this.handleWindowChangeEnterPip();
+          this.currentBrowserView.webContents.executeJavaScript(this.bilibiliPip.adapter);
+        });
     },
     bilibiliWatcher() {
-      this.$refs.webView.executeJavaScript(this.bilibiliPip.watcher);
+      this.currentBrowserView.webContents.executeJavaScript(this.bilibiliPip.watcher);
     },
     bilibiliRecover() {
-      this.$refs.webView.executeJavaScript(this.bilibiliPip.recover);
+      this.currentBrowserView.webContents.executeJavaScript(this.bilibiliPip.recover);
     },
   },
 };
@@ -616,6 +664,7 @@ export default {
   width: 100vw;
   display: flex;
   flex-direction: column;
+  background: rgba(255, 255, 255, 1);
   .web-view {
     flex: 1;
     background: rgba(255, 255, 255, 1);
diff --git a/src/renderer/components/BrowsingView/BrowsingFavicons.vue b/src/renderer/components/BrowsingView/BrowsingFavicons.vue
index 93a54847c9..11df63fbff 100644
--- a/src/renderer/components/BrowsingView/BrowsingFavicons.vue
+++ b/src/renderer/components/BrowsingView/BrowsingFavicons.vue
@@ -52,10 +52,6 @@ export default {
       type: Object,
       required: true,
     },
-    updateInitialUrl: {
-      type: Function,
-      required: true,
-    },
   },
   data() {
     return {
@@ -96,7 +92,10 @@ export default {
       this.faviconIndex = -1;
     },
     handleFavOpen(item: { name: string, type: string, url: string }) {
-      this.updateInitialUrl(this.recordUrl[item.type] ? this.recordUrl[item.type] : item.url);
+      this.$electron.remote.BrowserView.getAllViews()[0].webContents
+        .loadURL(this.recordUrl[item.type] ? this.recordUrl[item.type] : item.url);
+      this.$electron.remote.BrowserView.getAllViews()[1].webContents
+        .loadURL(this.recordUrl[item.type] ? this.recordUrl[item.type] : item.url);
     },
     handleFavAnimEnd(e: AnimationEvent) {
       const target = e.target as HTMLElement;
diff --git a/src/renderer/components/BrowsingView/BrowsingHeader.vue b/src/renderer/components/BrowsingView/BrowsingHeader.vue
index 86294ca02f..bd8526cf6f 100644
--- a/src/renderer/components/BrowsingView/BrowsingHeader.vue
+++ b/src/renderer/components/BrowsingView/BrowsingHeader.vue
@@ -16,7 +16,6 @@
     />
     <browsing-favicons
       :record-url="recordUrl"
-      :update-initial-url="updateInitialUrl"
       :style="{
         order: isDarwin ? 2 : 3,
       }"
@@ -48,8 +47,8 @@
 </template>
 
 <script lang="ts">
-import { mapActions, mapGetters } from 'vuex';
-import { Browsing as browsingActions } from '@/store/actionTypes';
+import electron from 'electron';
+import { mapGetters } from 'vuex';
 import BrowsingFavicons from '@/components/BrowsingView/BrowsingFavicons.vue';
 import BrowsingInput from '@/components/BrowsingView/BrowsingInput.vue';
 import BrowsingControl from '@/components/BrowsingView/BrowsingControl.vue';
@@ -99,14 +98,11 @@ export default {
     },
   },
   methods: {
-    ...mapActions({
-      updateInitialUrl: browsingActions.UPDATE_INITIAL_URL,
-    }),
     handleDbClick() {
       if (!this.isMaximized) {
-        this.$electron.ipcRenderer.send('callMainWindowMethod', 'maximize');
+        electron.ipcRenderer.send('callMainWindowMethod', 'maximize');
       } else {
-        this.$electron.ipcRenderer.send('callMainWindowMethod', 'unmaximize');
+        electron.ipcRenderer.send('callMainWindowMethod', 'unmaximize');
       }
     },
     closeUrlInput() {
@@ -116,7 +112,8 @@ export default {
       if (this.openFileByPlayingView(inputUrl)) {
         this.openUrlFile(inputUrl);
       } else {
-        this.updateInitialUrl(inputUrl);
+        this.$electron.remote.BrowserView.getAllViews()[1].webContents.loadURL(inputUrl);
+        this.$electron.remote.BrowserView.getAllViews()[0].webContents.loadURL(inputUrl);
       }
     },
     updateWebInfo(info: {
diff --git a/src/renderer/containers/LandingView.vue b/src/renderer/containers/LandingView.vue
index 3dce860624..d6be05e858 100644
--- a/src/renderer/containers/LandingView.vue
+++ b/src/renderer/containers/LandingView.vue
@@ -122,7 +122,9 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { mapGetters, mapActions } from 'vuex';
+import { mapGetters } from 'vuex';
+// @ts-ignore
+import urlParseLax from 'url-parse-lax';
 import { join } from 'path';
 import { Route } from 'vue-router';
 import { filePathToUrl } from '@/helpers/path';
@@ -135,7 +137,6 @@ import PlaylistItem from '@/components/LandingView/PlaylistItem.vue';
 import VideoItem from '@/components/LandingView/VideoItem.vue';
 import { log } from '@/libs/Log';
 import Sagi from '@/libs/sagi';
-import { Browsing as browsingActions } from '@/store/actionTypes';
 
 Vue.component('PlaylistItem', PlaylistItem);
 Vue.component('VideoItem', VideoItem);
@@ -304,11 +305,10 @@ export default {
     window.removeEventListener('keyup', this.keyboardHandler);
   },
   methods: {
-    ...mapActions({
-      updateInitialUrl: browsingActions.UPDATE_INITIAL_URL,
-    }),
     handleBrowsingOpen(url: string) {
-      this.updateInitialUrl(url);
+      const parsedUrl = urlParseLax(url);
+      this.$electron.ipcRenderer.send('add-browsing');
+      this.$electron.ipcRenderer.send('create-browser-view', { url: parsedUrl.protocol ? parsedUrl.href : `http://${url}` });
       this.$router.push({
         name: 'browsing-view',
       });
diff --git a/src/renderer/main.ts b/src/renderer/main.ts
index c5bf7f3fe0..27116dc94b 100644
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@@ -628,7 +628,6 @@ new Vue({
       changePrimarySubDelay: SubtitleManager.alterPrimaryDelay,
       changeSecondarySubDelay: SubtitleManager.alterSecondaryDelay,
       updateBarrageOpen: browsingActions.UPDATE_BARRAGE_OPEN,
-      updateInitialUrl: browsingActions.UPDATE_INITIAL_URL,
       showAudioTranslateModal: atActions.AUDIO_TRANSLATE_SHOW_MODAL,
     }),
     async initializeMenuSettings() {
@@ -686,19 +685,22 @@ new Vue({
         this.refreshMenu();
       });
       this.menuService.on('favourite.iqiyi', () => {
-        this.updateInitialUrl('https://www.iqiyi.com');
+        this.$electron.ipcRenderer.send('add-browsing');
+        this.$electron.ipcRenderer.send('create-browser-view', { url: 'https://www.iqiyi.com' });
         this.$router.push({
           name: 'browsing-view',
         });
       });
       this.menuService.on('favourite.bilibili', () => {
-        this.updateInitialUrl('https://www.bilibili.com');
+        this.$electron.ipcRenderer.send('add-browsing');
+        this.$electron.ipcRenderer.send('create-browser-view', { url: 'https://www.bilibili.com' });
         this.$router.push({
           name: 'browsing-view',
         });
       });
       this.menuService.on('favourite.youtube', () => {
-        this.updateInitialUrl('https://www.youtube.com');
+        this.$electron.ipcRenderer.send('add-browsing');
+        this.$electron.ipcRenderer.send('create-browser-view', { url: 'https://www.youtube.com' });
         this.$router.push({
           name: 'browsing-view',
         });
diff --git a/static/pip/preload.js b/static/pip/preload.js
index a17e4e414f..2007508269 100644
--- a/static/pip/preload.js
+++ b/static/pip/preload.js
@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
+// eslint-disable-next-line no-console
 console.log('preloaded~~~~~~~');
 const { ipcRenderer, remote } = require('electron');
 const mouse = process.platform === 'win32' ? require('win-mouse')() : null;
@@ -8,7 +9,7 @@ let isDragging = false;
 let mousedownPos = null;
 let windowSize = null;
 function sendToHost(channel, message) {
-  ipcRenderer.sendToHost(channel, message);
+  ipcRenderer.send(channel, message);
 }
 function getRatio() {
   return window.devicePixelRatio || 1;

From fcbaa05bde9bc8fc59aa9b3b8681009259988b05 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Mon, 12 Aug 2019 16:51:19 +0800
Subject: [PATCH 002/123] fix(browsingview): fix pip size error and fullscreen
 issues

---
 src/main/index.js                        | 56 +++++++++++++-----------
 src/renderer/components/BrowsingPip.vue  | 13 +++++-
 src/renderer/components/BrowsingView.vue | 31 ++++++++-----
 3 files changed, 62 insertions(+), 38 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index eedc0880c8..b93fcfb3af 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -69,6 +69,7 @@ let browserViews = [];
 let tray = null;
 let needToRestore = false;
 let inited = false;
+let hideBrowsingWindow = false;
 let finalVideoToOpen = [];
 const tmpVideoToOpen = [];
 const tmpSubsToOpen = [];
@@ -270,7 +271,6 @@ function createBrowsingWindow() {
     frame: false,
     titleBarStyle: 'none',
     transparent: true,
-    movable: true,
     webPreferences: {
       webSecurity: false,
       nodeIntegration: true,
@@ -291,6 +291,12 @@ function createBrowsingWindow() {
   browsingWindow.once('ready-to-show', () => {
     // browsingWindow.show();
   });
+  browsingWindow.on('leave-full-screen', () => {
+    if (hideBrowsingWindow) {
+      hideBrowsingWindow = false;
+      browsingWindow.hide();
+    }
+  });
 }
 
 function createLaborWindow() {
@@ -400,32 +406,25 @@ function registerMainWindowEvent(mainWindow) {
       console.error('callMainWindowMethod', method, JSON.stringify(args), '\n', ex);
     }
   });
-  ipcMain.on('store-pip-info', () => {
-    mainWindow.send('store-pip-info', [
-      browsingWindow.getPosition()[0],
-      browsingWindow.getPosition()[1],
-      browsingWindow.getSize()[0],
-      browsingWindow.getSize()[1],
-    ]);
-  });
-  ipcMain.on('remove-pip-browser', () => { // close pip window
-    browsingWindow.removeBrowserView(browserViews[0]);
-    if (browserViews[0].webContents.canGoBack()) {
-      browserViews[0].webContents.goBack();
+  ipcMain.on('store-pip-pos', () => {
+    if (browsingWindow) {
+      mainWindow.send('store-pip-pos', browsingWindow.getPosition());
     }
-    browsingWindow.hide();
+  });
+  ipcMain.on('pip-window-size', (evt, size) => {
+    mainWindow.send('pip-window-size', size);
   });
   ipcMain.on('remove-browser', (evt, isPip) => {
     if (isPip) {
-      mainWindow.removeBrowserView(browserViews[1]);
-      browsingWindow.removeBrowserView(browserViews[0]);
+      mainWindow.removeBrowserView(mainWindow.getBrowserView());
+      if (browsingWindow) browsingWindow.removeBrowserView(browsingWindow.getBrowserView());
     } else {
-      mainWindow.removeBrowserView(browserViews[0]);
+      mainWindow.removeBrowserView(mainWindow.getBrowserView());
     }
     browserViews.forEach((view) => {
       view.destroy();
     });
-    browsingWindow.hide();
+    if (browsingWindow) browsingWindow.hide();
   });
   ipcMain.on('create-browser-view', (evt, args) => {
     const isDestroyed = browserViews.filter(view => view.isDestroyed()).length;
@@ -453,22 +452,29 @@ function registerMainWindowEvent(mainWindow) {
     if (!browsingWindow) {
       createBrowsingWindow();
     }
-    browsingWindow.show();
     browsingWindow.openDevTools();
-    mainWindow.removeBrowserView(browserViews[0]);
-    browsingWindow.removeBrowserView(browserViews[1]);
+    mainWindow.removeBrowserView(mainWindow.getBrowserView());
+    browsingWindow.removeBrowserView(browsingWindow.getBrowserView());
     mainWindow.addBrowserView(browserViews[1]);
     browsingWindow.addBrowserView(browserViews[0]);
+    browsingWindow.show();
   });
   ipcMain.on('exit-pip', () => {
-    mainWindow.removeBrowserView(browserViews[1]);
-    browsingWindow.removeBrowserView(browserViews[0]);
+    mainWindow.removeBrowserView(mainWindow.getBrowserView());
+    if (browsingWindow) browsingWindow.removeBrowserView(browsingWindow.getBrowserView());
     if (browserViews[1].webContents.canGoBack()) {
       browserViews[1].webContents.goBack();
     }
     mainWindow.addBrowserView(browserViews[0]);
-    browsingWindow.addBrowserView(browserViews[1]);
-    browsingWindow.hide();
+    if (browsingWindow) browsingWindow.addBrowserView(browserViews[1]);
+    if (browsingWindow) {
+      if (browsingWindow.isFullScreen()) {
+        hideBrowsingWindow = true;
+        browsingWindow.setFullScreen(false);
+      } else {
+        browsingWindow.hide();
+      }
+    }
   });
   ipcMain.on('update-header-to-show', (e, headerToShow) => {
     mainWindow.send('update-header-to-show', headerToShow);
diff --git a/src/renderer/components/BrowsingPip.vue b/src/renderer/components/BrowsingPip.vue
index 9c6ef23bca..094b08cc44 100644
--- a/src/renderer/components/BrowsingPip.vue
+++ b/src/renderer/components/BrowsingPip.vue
@@ -5,6 +5,7 @@
 <script lang="ts">
 // @ts-ignore
 import urlParseLax from 'url-parse-lax';
+import { throttle } from 'lodash';
 import electron from 'electron';
 
 export default {
@@ -20,8 +21,18 @@ export default {
     },
   },
   mounted() {
+    window.addEventListener('resize', throttle(() => {
+      electron.ipcRenderer.send('pip-window-size', electron.remote.getCurrentWindow().getSize());
+    }, 100));
     window.addEventListener('beforeunload', () => {
-      electron.ipcRenderer.send('remove-pip-browser');
+      electron.ipcRenderer.send('store-pip-pos');
+      const view = electron.remote.getCurrentWindow().getBrowserView();
+      if (view) {
+        if (view.webContents.canGoBack()) {
+          view.webContents.goBack();
+        }
+        electron.remote.getCurrentWindow().removeBrowserView(view);
+      }
     });
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     this.currentBrowserView.webContents.addListener('ipc-message', (evt: any, channel: string, args: any) => { // https://github.com/electron/typescript-definitions/issues/27 fixed in 6.0.0
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index c103379b7a..5ccd7739e6 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -106,7 +106,7 @@ export default {
       menuService: null,
       pipRestore: false,
       acceleratorAvailable: true,
-      oldDisplayId: 0,
+      oldDisplayId: -1,
       backToLandingView: false,
     };
   },
@@ -116,19 +116,23 @@ export default {
       return process.platform === 'darwin';
     },
     iqiyiPip() {
-      return iqiyi(this.barrageOpen, this.winSize);
+      return iqiyi(this.barrageOpen, this.pipSize);
     },
     iqiyiBarrage() {
       return iqiyiBarrageAdapt(this.barrageOpen);
     },
     bilibiliPip() {
-      return bilibili(this.bilibiliType, this.barrageOpen, this.winSize);
+      return bilibili(
+        this.bilibiliType,
+        this.barrageOpen,
+        this.pipSize,
+      );
     },
     bilibiliBarrage() {
       return bilibiliBarrageAdapt(this.bilibiliType, this.barrageOpen);
     },
     othersPip() {
-      return globalPip(this.winSize);
+      return globalPip(this.pipSize);
     },
     danmuType() {
       return this.barrageOpen ? 'danmu' : 'noDanmu';
@@ -166,7 +170,7 @@ export default {
       this.$electron.ipcRenderer.send('update-enabled', 'history.forward', !val && this.currentBrowserView.webContents.canGoForward());
       if (!val) {
         this.$electron.ipcRenderer.send('exit-pip');
-        this.$electron.ipcRenderer.send('store-pip-info');
+        this.$electron.ipcRenderer.send('store-pip-pos');
         this.$electron.ipcRenderer.send('update-enabled', 'window.keepPlayingWindowFront', false);
         this.handleWindowChangeExitPip();
         if (this.pipType === 'youtube') {
@@ -193,7 +197,7 @@ export default {
         this.pipAdapter();
       }
     },
-    winWidth() {
+    pipSize() {
       if (this.isPip && this.pipType !== 'youtube') {
         if (this.pipType === 'iqiyi') {
           this.iqiyiWatcher();
@@ -283,7 +287,7 @@ export default {
       if (!this.asyncTasksDone) {
         e.returnValue = false;
         if (this.isPip) {
-          this.$electron.ipcRenderer.send('store-pip-info');
+          this.$electron.ipcRenderer.send('store-pip-pos');
         } else {
           this.$store.dispatch('updateBrowsingSize', this.winSize);
           this.$store.dispatch('updateBrowsingPos', this.winPos);
@@ -330,9 +334,8 @@ export default {
         name: 'landing-view',
       });
     });
-    this.$electron.ipcRenderer.on('store-pip-info', (e: Event, info: number[]) => {
-      this.$store.dispatch('updatePipSize', info.slice(2, 4));
-      this.$store.dispatch('updatePipPos', info.slice(0, 2));
+    this.$electron.ipcRenderer.on('store-pip-pos', (e: Event, pos: number[]) => {
+      this.$store.dispatch('updatePipPos', pos);
     });
     // eslint-disable-next-line @typescript-eslint/no-explicit-any,complexity
     this.currentBrowserView.webContents.addListener('ipc-message', (evt: any, channel: string, args: any) => { // https://github.com/electron/typescript-definitions/issues/27 fixed in 6.0.0
@@ -393,6 +396,9 @@ export default {
           break;
       }
     });
+    this.$electron.ipcRenderer.on('pip-window-size', (e: Event, size: number[]) => {
+      this.$store.dispatch('updatePipSize', size);
+    });
     this.$electron.ipcRenderer.on('quit', () => {
       this.quit = true;
     });
@@ -460,7 +466,7 @@ export default {
       barrageOpen: this.barrageOpen,
     }).then(() => {
       if (this.isPip) {
-        this.$electron.ipcRenderer.send('store-pip-info');
+        this.$electron.ipcRenderer.send('store-pip-pos');
       } else {
         this.$store.dispatch('updateBrowsingSize', this.winSize);
         this.$store.dispatch('updateBrowsingPos', this.winPos);
@@ -514,7 +520,8 @@ export default {
     handleWindowChangeEnterPip() {
       const newDisplayId = this.$electron.remote.screen
         .getDisplayNearestPoint({ x: this.winPos[0], y: this.winPos[1] }).id;
-      const useDefaultPosition = !this.pipPos.length || this.oldDisplayId !== newDisplayId;
+      const useDefaultPosition = !this.pipPos.length
+        || (this.oldDisplayId !== newDisplayId && this.oldDisplayId !== -1);
       this.oldDisplayId = newDisplayId;
       this.currentPipBrowserView.setBounds({
         x: 0, y: 36, width: this.winSize[0], height: this.winSize[1] - 36,

From 028b11fe11f4a5509ef9ef2e7e80462e7e7f2a8c Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Mon, 12 Aug 2019 18:40:33 +0800
Subject: [PATCH 003/123] fix(browsingview): fix browserview shift may cause
 error

---
 src/main/index.js                        |  38 +++--
 src/renderer/components/BrowsingPip.vue  |   1 +
 src/renderer/components/BrowsingView.vue | 200 ++++++++++++++---------
 3 files changed, 146 insertions(+), 93 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index b93fcfb3af..71edfeb1cc 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -426,6 +426,9 @@ function registerMainWindowEvent(mainWindow) {
     });
     if (browsingWindow) browsingWindow.hide();
   });
+  ipcMain.on('update-pip-state', () => {
+    mainWindow.send('update-pip-state');
+  });
   ipcMain.on('create-browser-view', (evt, args) => {
     const isDestroyed = browserViews.filter(view => view.isDestroyed()).length;
     if (!browserViews.length || isDestroyed) {
@@ -443,30 +446,41 @@ function registerMainWindowEvent(mainWindow) {
       ];
     }
     mainWindow.addBrowserView(browserViews[0]);
+    browsingWindow.addBrowserView(browserViews[1]);
     browserViews.forEach((view) => {
       view.webContents.loadURL(args.url);
       view.webContents.openDevTools();
     });
   });
   ipcMain.on('enter-pip', () => {
+    const mainView = mainWindow.getBrowserView();
     if (!browsingWindow) {
       createBrowsingWindow();
+      browsingWindow.openDevTools();
+      const browView = BrowserView.getAllViews().find(view => view.id !== mainView.id);
+      mainWindow.removeBrowserView(mainView);
+      browsingWindow.addBrowserView(mainView);
+      mainWindow.addBrowserView(browView);
+      browsingWindow.show();
+    } else {
+      const browView = browsingWindow.getBrowserView();
+      mainWindow.removeBrowserView(mainView);
+      browsingWindow.removeBrowserView(browView);
+      mainWindow.addBrowserView(browView);
+      browsingWindow.addBrowserView(mainView);
+      browsingWindow.show();
     }
-    browsingWindow.openDevTools();
-    mainWindow.removeBrowserView(mainWindow.getBrowserView());
-    browsingWindow.removeBrowserView(browsingWindow.getBrowserView());
-    mainWindow.addBrowserView(browserViews[1]);
-    browsingWindow.addBrowserView(browserViews[0]);
-    browsingWindow.show();
   });
   ipcMain.on('exit-pip', () => {
-    mainWindow.removeBrowserView(mainWindow.getBrowserView());
-    if (browsingWindow) browsingWindow.removeBrowserView(browsingWindow.getBrowserView());
-    if (browserViews[1].webContents.canGoBack()) {
-      browserViews[1].webContents.goBack();
+    const mainView = mainWindow.getBrowserView();
+    const browView = browsingWindow.getBrowserView();
+    mainWindow.removeBrowserView(mainView);
+    if (browsingWindow) browsingWindow.removeBrowserView(browView);
+    if (mainView.webContents.canGoBack()) {
+      mainView.webContents.goBack();
     }
-    mainWindow.addBrowserView(browserViews[0]);
-    if (browsingWindow) browsingWindow.addBrowserView(browserViews[1]);
+    mainWindow.addBrowserView(browView);
+    if (browsingWindow) browsingWindow.addBrowserView(mainView);
     if (browsingWindow) {
       if (browsingWindow.isFullScreen()) {
         hideBrowsingWindow = true;
diff --git a/src/renderer/components/BrowsingPip.vue b/src/renderer/components/BrowsingPip.vue
index 094b08cc44..89a5ea1350 100644
--- a/src/renderer/components/BrowsingPip.vue
+++ b/src/renderer/components/BrowsingPip.vue
@@ -33,6 +33,7 @@ export default {
         }
         electron.remote.getCurrentWindow().removeBrowserView(view);
       }
+      electron.ipcRenderer.send('update-pip-state');
     });
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     this.currentBrowserView.webContents.addListener('ipc-message', (evt: any, channel: string, args: any) => { // https://github.com/electron/typescript-definitions/issues/27 fixed in 6.0.0
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 5ccd7739e6..d600bdb032 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -108,6 +108,7 @@ export default {
       acceleratorAvailable: true,
       oldDisplayId: -1,
       backToLandingView: false,
+      browsingWindowClose: false,
     };
   },
   computed: {
@@ -140,12 +141,6 @@ export default {
     danmuIconState() {
       return ['youtube', 'others'].includes(this.pipType) || (this.pipType === 'bilibili' && this.bilibiliType === 'others') ? 0.2 : 1;
     },
-    currentBrowserView() {
-      return this.$electron.remote.BrowserView.getAllViews()[1];
-    },
-    currentPipBrowserView() {
-      return this.$electron.remote.BrowserView.getAllViews()[0];
-    },
   },
   watch: {
     dropFiles(val: string[]) {
@@ -166,23 +161,9 @@ export default {
     isPip(val: boolean) {
       this.menuService.updatePip(val);
       this.$electron.ipcRenderer.send('update-enabled', 'window.pip', true);
-      this.$electron.ipcRenderer.send('update-enabled', 'history.back', !val && this.currentBrowserView.webContents.canGoBack());
-      this.$electron.ipcRenderer.send('update-enabled', 'history.forward', !val && this.currentBrowserView.webContents.canGoForward());
-      if (!val) {
-        this.$electron.ipcRenderer.send('exit-pip');
-        this.$electron.ipcRenderer.send('store-pip-pos');
-        this.$electron.ipcRenderer.send('update-enabled', 'window.keepPlayingWindowFront', false);
-        this.handleWindowChangeExitPip();
-        if (this.pipType === 'youtube') {
-          this.youtubeRecover();
-        } else if (this.pipType === 'bilibili') {
-          this.bilibiliRecover();
-        } else if (this.pipType === 'iqiyi') {
-          this.iqiyiRecover();
-        } else {
-          this.othersRecover();
-        }
-      } else {
+      this.$electron.ipcRenderer.send('update-enabled', 'history.back', !val && this.$electron.remote.getCurrentWindow().getBrowserView().webContents.canGoBack());
+      this.$electron.ipcRenderer.send('update-enabled', 'history.forward', !val && this.$electron.remote.getCurrentWindow().getBrowserView().webContents.canGoForward());
+      if (val) {
         this.$electron.ipcRenderer.send('enter-pip');
         this.$store.dispatch('updateBrowsingSize', this.winSize);
         this.$store.dispatch('updateBrowsingPos', this.winPos);
@@ -195,6 +176,23 @@ export default {
           this.timeout = false;
         }, 3000);
         this.pipAdapter();
+      } else {
+        if (!this.browsingWindowClose) {
+          this.$electron.ipcRenderer.send('exit-pip');
+          this.$electron.ipcRenderer.send('store-pip-pos');
+          this.$electron.ipcRenderer.send('update-enabled', 'window.keepPlayingWindowFront', false);
+          this.handleWindowChangeExitPip();
+        }
+        this.browsingWindowClose = false;
+        if (this.pipType === 'youtube') {
+          this.youtubeRecover();
+        } else if (this.pipType === 'bilibili') {
+          this.bilibiliRecover();
+        } else if (this.pipType === 'iqiyi') {
+          this.iqiyiRecover();
+        } else {
+          this.othersRecover();
+        }
       }
     },
     pipSize() {
@@ -209,39 +207,44 @@ export default {
       }
     },
     loadingState(val: boolean) {
-      const loadUrl = this.currentBrowserView.webContents.getURL();
+      const loadUrl = this.$electron.remote.getCurrentWindow()
+        .getBrowserView().webContents.getURL();
       const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
-      this.$electron.ipcRenderer.send('update-enabled', 'history.back', this.currentBrowserView.webContents.canGoBack());
-      this.$electron.ipcRenderer.send('update-enabled', 'history.forward', this.currentBrowserView.webContents.canGoForward());
+      this.$electron.ipcRenderer.send('update-enabled', 'history.back', this.$electron.remote.getCurrentWindow().getBrowserView().webContents.canGoBack());
+      this.$electron.ipcRenderer.send('update-enabled', 'history.forward', this.$electron.remote.getCurrentWindow().getBrowserView().webContents.canGoForward());
       if (val) {
         this.hasVideo = false;
         this.$electron.ipcRenderer.send('update-enabled', 'window.pip', false);
         this.$refs.browsingHeader.updateWebInfo({
           hasVideo: this.hasVideo,
           url: loadUrl,
-          canGoBack: this.currentBrowserView.webContents.canGoBack(),
-          canGoForward: this.currentBrowserView.webContents.canGoForward(),
+          canGoBack: this.$electron.remote.getCurrentWindow()
+            .getBrowserView().webContents.canGoBack(),
+          canGoForward: this.$electron.remote.getCurrentWindow()
+            .getBrowserView().webContents.canGoForward(),
         });
       } else {
         if (this.pipRestore) {
           this.pipAdapter();
           this.pipRestore = false;
         }
-        this.currentBrowserView.webContents
+        this.$electron.remote.getCurrentWindow().getBrowserView().webContents
           .executeJavaScript(this.calculateVideoNum, (r: number) => {
             this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
             this.$electron.ipcRenderer.send('update-enabled', 'window.pip', this.hasVideo);
             this.$refs.browsingHeader.updateWebInfo({
               hasVideo: this.hasVideo,
               url: loadUrl,
-              canGoBack: this.currentBrowserView.webContents.canGoBack(),
-              canGoForward: this.currentBrowserView.webContents.canGoForward(),
+              canGoBack: this.$electron.remote.getCurrentWindow()
+                .getBrowserView().webContents.canGoBack(),
+              canGoForward: this.$electron.remote.getCurrentWindow()
+                .getBrowserView().webContents.canGoForward(),
             });
           });
       }
     },
     headerToShow(val: boolean) {
-      const currentView = this.isPip ? this.currentPipBrowserView : this.currentBrowserView;
+      const currentView = this.$electron.remote.getCurrentWindow().getBrowserView();
       if (!val) {
         currentView.setBounds({
           x: 0, y: 0, width: window.screen.width, height: window.screen.height,
@@ -262,10 +265,11 @@ export default {
     );
     this.$store.dispatch('updateBrowsingPos', this.winPos);
     this.$electron.ipcRenderer.send('callMainWindowMethod', 'setAspectRatio', [0]);
-    this.currentBrowserView.setBounds({
+    this.$electron.remote.getCurrentWindow().getBrowserView().setBounds({
       x: 0, y: 36, width: this.browsingSize[0], height: this.browsingSize[1] - 36,
     });
-    this.currentBrowserView.setAutoResize({ width: true, height: true });
+    this.$electron.remote.getCurrentWindow()
+      .getBrowserView().setAutoResize({ width: true, height: true });
   },
   mounted() {
     this.menuService = new MenuService();
@@ -338,7 +342,7 @@ export default {
       this.$store.dispatch('updatePipPos', pos);
     });
     // eslint-disable-next-line @typescript-eslint/no-explicit-any,complexity
-    this.currentBrowserView.webContents.addListener('ipc-message', (evt: any, channel: string, args: any) => { // https://github.com/electron/typescript-definitions/issues/27 fixed in 6.0.0
+    this.$electron.remote.getCurrentWindow().getBrowserView().webContents.addListener('ipc-message', (evt: any, channel: string, args: any) => { // https://github.com/electron/typescript-definitions/issues/27 fixed in 6.0.0
       switch (channel) {
         case 'open-url':
           this.handleOpenUrl(args);
@@ -350,7 +354,7 @@ export default {
         case 'drop':
           this.maskToShow = false;
           if ((args.files as string[]).length) {
-            this.currentBrowserView.setBounds({
+            this.$electron.remote.getCurrentWindow().getBrowserView().setBounds({
               x: 0, y: 36, width: 0, height: 0,
             });
             this.dropFiles = args.files;
@@ -406,27 +410,29 @@ export default {
     this.$electron.ipcRenderer.on('update-header-to-show', (ev: any, headerToShow: boolean) => {
       this.headerToShow = headerToShow;
     });
-    this.$electron.ipcRenderer.on('quit-pip', () => {
-      this.isPip = false;
+    this.$electron.ipcRenderer.on('update-pip-state', () => {
+      this.browsingWindowClose = true;
+      this.updateIsPip(false);
     });
-    this.currentBrowserView.webContents.addListener('dom-ready', () => { // for webview test
+    this.$electron.remote.getCurrentWindow().getBrowserView().webContents.addListener('dom-ready', () => { // for webview test
       window.focus();
-      this.currentBrowserView.webContents.focus();
-      if (process.env.NODE_ENV === 'development') this.currentBrowserView.webContents.openDevTools();
+      this.$electron.remote.getCurrentWindow().getBrowserView().webContents.focus();
+      if (process.env.NODE_ENV === 'development') this.$electron.remote.getCurrentWindow().getBrowserView().webContents.openDevTools();
     });
     // https://github.com/electron/typescript-definitions/issues/27 fixed in 6.0.0
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    this.currentBrowserView.webContents.addListener('new-window', (e: any, url: string, disposition: string) => {
+    this.$electron.remote.getCurrentWindow().getBrowserView().webContents.addListener('new-window', (e: any, url: string, disposition: string) => {
       if (disposition !== 'new-window') {
         this.handleOpenUrl({ url });
       }
     });
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    this.currentBrowserView.webContents.addListener('did-start-navigation', (e: any, url: string) => {
+    this.$electron.remote.getCurrentWindow().getBrowserView().webContents.addListener('did-start-navigation', (e: any, url: string) => {
       if (!url || url === 'about:blank') return;
       this.startTime = new Date().getTime();
       this.loadingState = true;
-      const loadUrl = this.currentBrowserView.webContents.getURL();
+      const loadUrl = this.$electron.remote.getCurrentWindow()
+        .getBrowserView().webContents.getURL();
       this.currentUrl = loadUrl;
       const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
       if (recordIndex !== -1) {
@@ -445,7 +451,7 @@ export default {
         }
       }
     });
-    this.currentBrowserView.webContents.addListener('did-stop-loading', () => {
+    this.$electron.remote.getCurrentWindow().getBrowserView().webContents.addListener('did-stop-loading', () => {
       const loadingTime: number = new Date().getTime() - this.startTime;
       if (loadingTime % 3000 === 0) {
         this.loadingState = false;
@@ -489,7 +495,7 @@ export default {
       if (this.isPip) {
         this.updateIsPip(false);
       }
-      this.currentBrowserView.webContents.loadURL(urlParseLax(url).protocol ? url : `https:${url}`);
+      this.$electron.remote.getCurrentWindow().getBrowserView().webContents.loadURL(urlParseLax(url).protocol ? url : `https:${url}`);
     },
     pipAdapter() {
       const parseUrl = urlParseLax(this.currentUrl);
@@ -518,16 +524,20 @@ export default {
       this.pipBtnsKeepShow = false;
     },
     handleWindowChangeEnterPip() {
+      const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
+      const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        .filter((view: any) => view.id !== currentBrowserView.id)[0];
       const newDisplayId = this.$electron.remote.screen
         .getDisplayNearestPoint({ x: this.winPos[0], y: this.winPos[1] }).id;
       const useDefaultPosition = !this.pipPos.length
         || (this.oldDisplayId !== newDisplayId && this.oldDisplayId !== -1);
       this.oldDisplayId = newDisplayId;
-      this.currentPipBrowserView.setBounds({
+      currentBrowserView.setBounds({
         x: 0, y: 36, width: this.winSize[0], height: this.winSize[1] - 36,
       });
-      this.currentPipBrowserView.setAutoResize({ width: true, height: true });
-      this.currentBrowserView.webContents
+      currentBrowserView.setAutoResize({ width: true, height: true });
+      currentPipBrowserView.webContents
         .executeJavaScript(this.getVideoStyle, (result: CSSStyleDeclaration) => {
           const videoAspectRatio = parseFloat(result.width as string)
             / parseFloat(result.height as string);
@@ -547,7 +557,7 @@ export default {
             ? [this.pipSize[0], Math.round(this.pipSize[0] / videoAspectRatio)]
             : [Math.round(this.pipSize[1] * videoAspectRatio), this.pipSize[1]];
           this.$electron.ipcRenderer.send('callBrowsingWindowMethod', 'setSize', calculateSize);
-          this.currentBrowserView.setBounds({
+          currentPipBrowserView.setBounds({
             x: 0, y: 0, width: calculateSize[0], height: calculateSize[1],
           });
         });
@@ -555,8 +565,9 @@ export default {
     handleWindowChangeExitPip() {
       const newDisplayId = this.$electron.remote.screen
         .getDisplayNearestPoint({ x: this.winPos[0], y: this.winPos[1] }).id;
-      this.currentBrowserView.setAutoResize({ width: false, height: false });
-      this.currentBrowserView.setBounds({
+      this.$electron.remote.getCurrentWindow()
+        .getBrowserView().setAutoResize({ width: false, height: false });
+      this.$electron.remote.getCurrentWindow().getBrowserView().setBounds({
         x: 0, y: 36, width: this.winSize[0], height: this.winSize[1] - 36,
       });
       // if (this.oldDisplayId !== newDisplayId) {
@@ -572,41 +583,36 @@ export default {
       this.oldDisplayId = newDisplayId;
       // this.$electron.ipcRenderer.send('callMainWindowMethod', 'setAspectRatio', [0]);
       // this.$electron.ipcRenderer.send('callMainWindowMethod', 'setMinimumSize', [570, 375]);
-      this.currentBrowserView.setAutoResize({ width: true, height: true });
+      this.$electron.remote.getCurrentWindow()
+        .getBrowserView().setAutoResize({ width: true, height: true });
     },
     handleDanmuDisplay() {
       if (this.pipType === 'iqiyi') {
         this.updateBarrageOpen(!this.barrageOpen);
-        this.currentBrowserView.webContents.executeJavaScript(this.iqiyiBarrage);
+        this.$electron.remote.getCurrentWindow()
+          .getBrowserView().webContents.executeJavaScript(this.iqiyiBarrage);
       } else if (this.pipType === 'bilibili') {
         this.updateBarrageOpen(!this.barrageOpen);
-        this.currentBrowserView.webContents.executeJavaScript(this.bilibiliBarrage);
+        this.$electron.remote.getCurrentWindow()
+          .getBrowserView().webContents.executeJavaScript(this.bilibiliBarrage);
       }
     },
     handleUrlForward() {
-      if (!this.isPip) {
-        if (this.currentBrowserView.webContents.canGoForward()) {
-          this.currentBrowserView.webContents.goForward();
-        }
-      } else if (this.currentPipBrowserView.webContents.canGoForward()) {
-        this.currentPipBrowserView.webContents.goForward();
+      if (this.$electron.remote.getCurrentWindow().getBrowserView().webContents.canGoForward()) {
+        this.$electron.remote.getCurrentWindow().getBrowserView().webContents.goForward();
       }
     },
     handleUrlBack() {
-      if (!this.isPip) {
-        if (this.currentBrowserView.webContents.canGoBack()) {
-          this.currentBrowserView.webContents.goBack();
-        }
-      } else if (this.currentPipBrowserView.webContents.canGoBack()) {
-        this.currentPipBrowserView.webContents.goBack();
+      if (this.$electron.remote.getCurrentWindow().getBrowserView().webContents.canGoBack()) {
+        this.$electron.remote.getCurrentWindow().getBrowserView().webContents.goBack();
       }
     },
     handleUrlReload() {
       if (this.isPip) {
         this.pipRestore = true;
-        this.currentPipBrowserView.webContents.reload();
+        this.$electron.remote.getCurrentWindow().getBrowserView().webContents.reload();
       } else {
-        this.currentBrowserView.webContents.reload();
+        this.$electron.remote.getCurrentWindow().getBrowserView().webContents.reload();
       }
     },
     handleEnterPip() {
@@ -620,46 +626,78 @@ export default {
       }
     },
     othersAdapter() {
+      const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
+      const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        .filter((view: any) => view.id !== currentBrowserView.id)[0];
       this.handleWindowChangeEnterPip();
-      this.currentBrowserView.webContents.executeJavaScript(this.othersPip.adapter);
+      currentPipBrowserView.webContents.executeJavaScript(this.othersPip.adapter);
     },
     othersWatcher() {
-      this.currentBrowserView.webContents.executeJavaScript(this.othersPip.watcher);
+      const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
+      const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        .filter((view: any) => view.id !== currentBrowserView.id)[0];
+      currentPipBrowserView.webContents.executeJavaScript(this.othersPip.watcher);
     },
     othersRecover() {
-      this.currentBrowserView.webContents.executeJavaScript(this.othersPip.recover);
+      this.$electron.remote.getCurrentWindow()
+        .getBrowserView().webContents.executeJavaScript(this.othersPip.recover);
     },
     iqiyiAdapter() {
+      const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
+      const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        .filter((view: any) => view.id !== currentBrowserView.id)[0];
       this.handleWindowChangeEnterPip();
-      this.currentBrowserView.webContents.executeJavaScript(this.iqiyiPip.adapter);
+      currentPipBrowserView.webContents.executeJavaScript(this.iqiyiPip.adapter);
     },
     iqiyiWatcher() {
-      this.currentBrowserView.webContents.executeJavaScript(this.iqiyiPip.watcher);
+      const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
+      const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        .filter((view: any) => view.id !== currentBrowserView.id)[0];
+      currentPipBrowserView.webContents.executeJavaScript(this.iqiyiPip.watcher);
     },
     iqiyiRecover() {
-      this.currentBrowserView.webContents.executeJavaScript(this.iqiyiPip.recover);
+      this.$electron.remote.getCurrentWindow()
+        .getBrowserView().webContents.executeJavaScript(this.iqiyiPip.recover);
     },
     youtubeAdapter() {
+      const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
+      const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        .filter((view: any) => view.id !== currentBrowserView.id)[0];
       this.handleWindowChangeEnterPip();
-      this.currentBrowserView.webContents.executeJavaScript(youtube.adapter);
+      currentPipBrowserView.webContents.executeJavaScript(youtube.adapter);
     },
     youtubeRecover() {
-      this.currentBrowserView.webContents.executeJavaScript(youtube.recover);
+      this.$electron.remote.getCurrentWindow()
+        .getBrowserView().webContents.executeJavaScript(youtube.recover);
     },
     bilibiliAdapter() {
-      this.currentBrowserView.webContents
+      const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
+      const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        .filter((view: any) => view.id !== currentBrowserView.id)[0];
+      currentPipBrowserView.webContents
         .executeJavaScript(bilibiliFindType, (r: (HTMLElement | null)[]) => {
           this.bilibiliType = ['bangumi', 'videoStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
         }).then(() => {
           this.handleWindowChangeEnterPip();
-          this.currentBrowserView.webContents.executeJavaScript(this.bilibiliPip.adapter);
+          currentPipBrowserView.webContents.executeJavaScript(this.bilibiliPip.adapter);
         });
     },
     bilibiliWatcher() {
-      this.currentBrowserView.webContents.executeJavaScript(this.bilibiliPip.watcher);
+      const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
+      const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        .filter((view: any) => view.id !== currentBrowserView.id)[0];
+      currentPipBrowserView.webContents.executeJavaScript(this.bilibiliPip.watcher);
     },
     bilibiliRecover() {
-      this.currentBrowserView.webContents.executeJavaScript(this.bilibiliPip.recover);
+      this.$electron.remote.getCurrentWindow()
+        .getBrowserView().webContents.executeJavaScript(this.bilibiliPip.recover);
     },
   },
 };

From e049ef18cc949168e3210b73afb7bc691c919711 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Tue, 13 Aug 2019 13:12:08 +0800
Subject: [PATCH 004/123] fix(browsingview): fix browsing view menu

---
 src/main/index.js                        | 10 +---
 src/main/menu/Menu.ts                    | 10 ++--
 src/main/menu/MenuService.ts             |  8 +--
 src/renderer/components/BrowsingPip.vue  | 25 ++++----
 src/renderer/components/BrowsingView.vue | 72 ++++++++++++------------
 src/renderer/main.ts                     |  5 +-
 6 files changed, 65 insertions(+), 65 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index 71edfeb1cc..806bbd51e2 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -414,13 +414,9 @@ function registerMainWindowEvent(mainWindow) {
   ipcMain.on('pip-window-size', (evt, size) => {
     mainWindow.send('pip-window-size', size);
   });
-  ipcMain.on('remove-browser', (evt, isPip) => {
-    if (isPip) {
-      mainWindow.removeBrowserView(mainWindow.getBrowserView());
-      if (browsingWindow) browsingWindow.removeBrowserView(browsingWindow.getBrowserView());
-    } else {
-      mainWindow.removeBrowserView(mainWindow.getBrowserView());
-    }
+  ipcMain.on('remove-browser', () => {
+    mainWindow.removeBrowserView(mainWindow.getBrowserView());
+    if (browsingWindow) browsingWindow.removeBrowserView(browsingWindow.getBrowserView());
     browserViews.forEach((view) => {
       view.destroy();
     });
diff --git a/src/main/menu/Menu.ts b/src/main/menu/Menu.ts
index 83c685f404..77f9595114 100644
--- a/src/main/menu/Menu.ts
+++ b/src/main/menu/Menu.ts
@@ -44,7 +44,7 @@ export default class Menubar {
 
   private playlistOpened = false;
 
-  private isPip = false;
+  private focusOnMainWindow = true;
 
   private playingViewTop = false;
 
@@ -184,9 +184,9 @@ export default class Menubar {
     }
   }
 
-  public updateIsPip(isPip: boolean) {
-    if (this.isPip !== isPip) {
-      this.isPip = isPip;
+  public updateFocusedWindow(isMainWindow: boolean) {
+    if (this.focusOnMainWindow !== isMainWindow) {
+      this.focusOnMainWindow = isMainWindow;
       this.refreshBrowsingWindowMenu();
     }
   }
@@ -394,7 +394,7 @@ export default class Menubar {
     actions.push(...[
       this.createMenuItemByTemplate(floatMenuItem),
       separator(),
-      this.createMenuItem(this.isPip ? 'msg.window.exitPip' : 'msg.window.enterPip', undefined, 'P', true, undefined, 'window.pip'),
+      this.createMenuItem(this.focusOnMainWindow ? 'msg.window.enterPip' : 'msg.window.exitPip', undefined, 'P', true, undefined, 'window.pip'),
       separator(),
       this.createRoleMenuItem(
         minimizeMenuItem.label,
diff --git a/src/main/menu/MenuService.ts b/src/main/menu/MenuService.ts
index 88bea202e2..9a21b15ece 100644
--- a/src/main/menu/MenuService.ts
+++ b/src/main/menu/MenuService.ts
@@ -40,8 +40,8 @@ export default class MenuService {
     this.menu.updateFullScreen(isFullScreen);
   }
 
-  public updateIsPip(isPip: boolean) {
-    this.menu.updateIsPip(isPip);
+  public updateFocusedWindow(isPip: boolean) {
+    this.menu.updateFocusedWindow(isPip);
   }
 
   private registeMenuActions() {
@@ -78,8 +78,8 @@ export default class MenuService {
     ipcMain.on('update-browsingview-on-top', (e: Event, topOnWindow: boolean) => {
       this.menu.updateBrowsingViewTop(topOnWindow);
     });
-    ipcMain.on('update-pip', (e: Event, isPip: boolean) => {
-      this.updateIsPip(isPip);
+    ipcMain.on('update-focused-window', (e: Event, isMainWindow: boolean) => {
+      this.updateFocusedWindow(isMainWindow);
     });
     ipcMain.on('update-checked', (e: Event, id: string, checked: boolean) => {
       this.menu.updateMenuItemChecked(id, checked);
diff --git a/src/renderer/components/BrowsingPip.vue b/src/renderer/components/BrowsingPip.vue
index 89a5ea1350..aed6a7548e 100644
--- a/src/renderer/components/BrowsingPip.vue
+++ b/src/renderer/components/BrowsingPip.vue
@@ -21,6 +21,11 @@ export default {
     },
   },
   mounted() {
+    window.addEventListener('focus', () => {
+      electron.ipcRenderer.send('update-focused-window', false);
+      electron.ipcRenderer.send('update-enabled', 'window.pip', true);
+      electron.ipcRenderer.send('update-enabled', 'window.keepPlayingWindowFront', true);
+    });
     window.addEventListener('resize', throttle(() => {
       electron.ipcRenderer.send('pip-window-size', electron.remote.getCurrentWindow().getSize());
     }, 100));
@@ -128,16 +133,16 @@ export default {
         }
       }
     });
-    this.currentBrowserView.webContents.addListener('did-stop-loading', () => {
-      const loadingTime: number = new Date().getTime() - this.startTime;
-      if (loadingTime % 3000 === 0) {
-        this.loadingState = false;
-      } else {
-        setTimeout(() => {
-          this.loadingState = false;
-        }, 3000 - (loadingTime % 3000));
-      }
-    });
+    // this.currentBrowserView.webContents.addListener('did-stop-loading', () => {
+    //   const loadingTime: number = new Date().getTime() - this.startTime;
+    //   if (loadingTime % 3000 === 0) {
+    //     this.loadingState = false;
+    //   } else {
+    //     setTimeout(() => {
+    //       this.loadingState = false;
+    //     }, 3000 - (loadingTime % 3000));
+    //   }
+    // });
   },
   methods: {
     handleOpenUrl({ url }: { url: string }) {
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index d600bdb032..148421dc9c 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -160,14 +160,10 @@ export default {
     },
     isPip(val: boolean) {
       this.menuService.updatePip(val);
-      this.$electron.ipcRenderer.send('update-enabled', 'window.pip', true);
-      this.$electron.ipcRenderer.send('update-enabled', 'history.back', !val && this.$electron.remote.getCurrentWindow().getBrowserView().webContents.canGoBack());
-      this.$electron.ipcRenderer.send('update-enabled', 'history.forward', !val && this.$electron.remote.getCurrentWindow().getBrowserView().webContents.canGoForward());
       if (val) {
         this.$electron.ipcRenderer.send('enter-pip');
         this.$store.dispatch('updateBrowsingSize', this.winSize);
         this.$store.dispatch('updateBrowsingPos', this.winPos);
-        this.$electron.ipcRenderer.send('update-enabled', 'window.keepPlayingWindowFront', true);
         this.timeout = true;
         if (this.timer) {
           clearTimeout(this.timer);
@@ -180,7 +176,6 @@ export default {
         if (!this.browsingWindowClose) {
           this.$electron.ipcRenderer.send('exit-pip');
           this.$electron.ipcRenderer.send('store-pip-pos');
-          this.$electron.ipcRenderer.send('update-enabled', 'window.keepPlayingWindowFront', false);
           this.handleWindowChangeExitPip();
         }
         this.browsingWindowClose = false;
@@ -276,18 +271,35 @@ export default {
     this.$bus.$on('toggle-reload', this.handleUrlReload);
     this.$bus.$on('toggle-back', this.handleUrlBack);
     this.$bus.$on('toggle-forward', this.handleUrlForward);
-    this.$bus.$on('toggle-pip', () => {
+    this.$bus.$on('toggle-pip', (state: boolean) => {
       setTimeout(() => {
-        if (this.hasVideo && this.acceleratorAvailable) {
-          this.updateIsPip(!this.isPip);
-        }
-        if (!this.acceleratorAvailable) {
+        if (this.acceleratorAvailable) {
+          if (!state) {
+            this.updateIsPip(false);
+          } else if (this.hasVideo) {
+            this.updateIsPip(true);
+          }
+        } else {
           this.acceleratorAvailable = true;
         }
       }, 0);
     });
+    window.addEventListener('focus', () => {
+      this.$electron.ipcRenderer.send('update-focused-window', true);
+      this.$electron.ipcRenderer.send('update-enabled', 'history.back', this.$electron.remote.getCurrentWindow().getBrowserView().webContents.canGoBack());
+      this.$electron.ipcRenderer.send('update-enabled', 'history.forward', this.$electron.remote.getCurrentWindow().getBrowserView().webContents.canGoForward());
+      this.$electron.ipcRenderer.send('update-enabled', 'window.keepPlayingWindowFront', false);
+      const loadUrl = this.$electron.remote.getCurrentWindow()
+        .getBrowserView().webContents.getURL();
+      const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
+      this.$electron.remote.getCurrentWindow().getBrowserView().webContents
+        .executeJavaScript(this.calculateVideoNum, (r: number) => {
+          this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
+          this.$electron.ipcRenderer.send('update-enabled', 'window.pip', this.hasVideo);
+        });
+    });
     window.addEventListener('beforeunload', (e: BeforeUnloadEvent) => {
-      this.$electron.ipcRenderer.send('remove-browser', this.isPip);
+      this.$electron.ipcRenderer.send('remove-browser');
       if (!this.asyncTasksDone) {
         e.returnValue = false;
         if (this.isPip) {
@@ -342,7 +354,7 @@ export default {
       this.$store.dispatch('updatePipPos', pos);
     });
     // eslint-disable-next-line @typescript-eslint/no-explicit-any,complexity
-    this.$electron.remote.getCurrentWindow().getBrowserView().webContents.addListener('ipc-message', (evt: any, channel: string, args: any) => { // https://github.com/electron/typescript-definitions/issues/27 fixed in 6.0.0
+    this.$electron.remote.getCurrentWindow().getBrowserView().webContents.addListener('ipc-message', (evt: Event, channel: string, args: any) => { // https://github.com/electron/typescript-definitions/issues/27 fixed in 6.0.0
       switch (channel) {
         case 'open-url':
           this.handleOpenUrl(args);
@@ -406,8 +418,7 @@ export default {
     this.$electron.ipcRenderer.on('quit', () => {
       this.quit = true;
     });
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    this.$electron.ipcRenderer.on('update-header-to-show', (ev: any, headerToShow: boolean) => {
+    this.$electron.ipcRenderer.on('update-header-to-show', (ev: Event, headerToShow: boolean) => {
       this.headerToShow = headerToShow;
     });
     this.$electron.ipcRenderer.on('update-pip-state', () => {
@@ -419,15 +430,12 @@ export default {
       this.$electron.remote.getCurrentWindow().getBrowserView().webContents.focus();
       if (process.env.NODE_ENV === 'development') this.$electron.remote.getCurrentWindow().getBrowserView().webContents.openDevTools();
     });
-    // https://github.com/electron/typescript-definitions/issues/27 fixed in 6.0.0
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    this.$electron.remote.getCurrentWindow().getBrowserView().webContents.addListener('new-window', (e: any, url: string, disposition: string) => {
+    this.$electron.remote.getCurrentWindow().getBrowserView().webContents.addListener('new-window', (e: Event, url: string, disposition: string) => {
       if (disposition !== 'new-window') {
         this.handleOpenUrl({ url });
       }
     });
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    this.$electron.remote.getCurrentWindow().getBrowserView().webContents.addListener('did-start-navigation', (e: any, url: string) => {
+    this.$electron.remote.getCurrentWindow().getBrowserView().webContents.addListener('did-start-navigation', (e: Event, url: string) => {
       if (!url || url === 'about:blank') return;
       this.startTime = new Date().getTime();
       this.loadingState = true;
@@ -463,7 +471,7 @@ export default {
     });
   },
   beforeDestroy() {
-    this.$electron.ipcRenderer.send('remove-browser', this.isPip);
+    this.$electron.ipcRenderer.send('remove-browser');
     asyncStorage.set('browsing', {
       pipSize: this.pipSize,
       pipPos: this.pipPos,
@@ -526,8 +534,7 @@ export default {
     handleWindowChangeEnterPip() {
       const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
       const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        .filter((view: any) => view.id !== currentBrowserView.id)[0];
+        .filter((view: Electron.BrowserView) => view.id !== currentBrowserView.id)[0];
       const newDisplayId = this.$electron.remote.screen
         .getDisplayNearestPoint({ x: this.winPos[0], y: this.winPos[1] }).id;
       const useDefaultPosition = !this.pipPos.length
@@ -628,16 +635,14 @@ export default {
     othersAdapter() {
       const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
       const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        .filter((view: any) => view.id !== currentBrowserView.id)[0];
+        .filter((view: Electron.BrowserView) => view.id !== currentBrowserView.id)[0];
       this.handleWindowChangeEnterPip();
       currentPipBrowserView.webContents.executeJavaScript(this.othersPip.adapter);
     },
     othersWatcher() {
       const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
       const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        .filter((view: any) => view.id !== currentBrowserView.id)[0];
+        .filter((view: Electron.BrowserView) => view.id !== currentBrowserView.id)[0];
       currentPipBrowserView.webContents.executeJavaScript(this.othersPip.watcher);
     },
     othersRecover() {
@@ -647,16 +652,14 @@ export default {
     iqiyiAdapter() {
       const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
       const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        .filter((view: any) => view.id !== currentBrowserView.id)[0];
+        .filter((view: Electron.BrowserView) => view.id !== currentBrowserView.id)[0];
       this.handleWindowChangeEnterPip();
       currentPipBrowserView.webContents.executeJavaScript(this.iqiyiPip.adapter);
     },
     iqiyiWatcher() {
       const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
       const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        .filter((view: any) => view.id !== currentBrowserView.id)[0];
+        .filter((view: Electron.BrowserView) => view.id !== currentBrowserView.id)[0];
       currentPipBrowserView.webContents.executeJavaScript(this.iqiyiPip.watcher);
     },
     iqiyiRecover() {
@@ -666,8 +669,7 @@ export default {
     youtubeAdapter() {
       const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
       const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        .filter((view: any) => view.id !== currentBrowserView.id)[0];
+        .filter((view: Electron.BrowserView) => view.id !== currentBrowserView.id)[0];
       this.handleWindowChangeEnterPip();
       currentPipBrowserView.webContents.executeJavaScript(youtube.adapter);
     },
@@ -678,8 +680,7 @@ export default {
     bilibiliAdapter() {
       const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
       const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        .filter((view: any) => view.id !== currentBrowserView.id)[0];
+        .filter((view: Electron.BrowserView) => view.id !== currentBrowserView.id)[0];
       currentPipBrowserView.webContents
         .executeJavaScript(bilibiliFindType, (r: (HTMLElement | null)[]) => {
           this.bilibiliType = ['bangumi', 'videoStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
@@ -691,8 +692,7 @@ export default {
     bilibiliWatcher() {
       const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
       const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        .filter((view: any) => view.id !== currentBrowserView.id)[0];
+        .filter((view: Electron.BrowserView) => view.id !== currentBrowserView.id)[0];
       currentPipBrowserView.webContents.executeJavaScript(this.bilibiliPip.watcher);
     },
     bilibiliRecover() {
diff --git a/src/renderer/main.ts b/src/renderer/main.ts
index cb400a048c..e6ce25aba4 100644
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@@ -199,8 +199,7 @@ new Vue({
   },
   watch: {
     topOnWindow(val: boolean) {
-      const browserWindow = this.$electron.remote.getCurrentWindow();
-      browserWindow.setAlwaysOnTop(val);
+      this.$electron.ipcRenderer.send(this.currentRouteName === 'browsing-view' ? 'callBrowsingWindowMethod' : 'callMainWindowMethod', 'setAlwaysOnTop', [val]);
     },
     playingViewTop(val: boolean) {
       if (this.currentRouteName === 'playing-view' && !this.paused) {
@@ -891,7 +890,7 @@ new Vue({
         if (this.currentRouteName === 'browsing-view') this.browsingViewTop = !this.browsingViewTop;
       });
       this.menuService.on('window.pip', () => {
-        this.$bus.$emit('toggle-pip');
+        this.$bus.$emit('toggle-pip', !this.isPip);
       });
       this.menuService.on('window.fullscreen', () => {
         if (this.isFullScreen) {

From b286503627653e017f0a4479df8f752b942c1f5c Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Wed, 14 Aug 2019 16:29:30 +0800
Subject: [PATCH 005/123] style(pipControl): fix pip control buttons style

---
 src/main/index.js                         |  81 +++++-
 src/renderer/components/BrowsingPip.vue   | 125 +---------
 src/renderer/components/BrowsingView.vue  | 286 +++++++++++++++-------
 src/renderer/services/menu/MenuService.ts |   4 -
 static/pip/pipControl.html                |  43 ++++
 static/pip/preload.js                     |  39 ++-
 6 files changed, 357 insertions(+), 221 deletions(-)
 create mode 100644 static/pip/pipControl.html

diff --git a/src/main/index.js b/src/main/index.js
index 806bbd51e2..e72e0fc839 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -1,7 +1,7 @@
 // Be sure to call Sentry function as early as possible in the main process
 import '../shared/sentry';
 
-import { app, BrowserWindow, session, Tray, ipcMain, globalShortcut, nativeImage, splayerx, systemPreferences, BrowserView } from 'electron' // eslint-disable-line
+import { app, BrowserWindow, session, Tray, ipcMain, globalShortcut, nativeImage, splayerx, systemPreferences, BrowserView, webContents } from 'electron' // eslint-disable-line
 import { throttle, debounce, uniq } from 'lodash';
 import os from 'os';
 import path, {
@@ -65,8 +65,10 @@ let laborWindow = null;
 let aboutWindow = null;
 let preferenceWindow = null;
 let browsingWindow = null;
+let pipControlView = null;
 let browserViews = [];
 let tray = null;
+let pipTimer = 0;
 let needToRestore = false;
 let inited = false;
 let hideBrowsingWindow = false;
@@ -124,6 +126,14 @@ function handleBossKey() {
   }
 }
 
+function createPipControlView() {
+  pipControlView = new BrowserView({
+    webPreferences: {
+      preload: `${require('path').resolve(__static, 'pip/preload.js')}`,
+    },
+  });
+}
+
 function markNeedToRestore() {
   fs.closeSync(fs.openSync(path.join(app.getPath('userData'), 'NEED_TO_RESTORE_MARK'), 'w'));
 }
@@ -416,10 +426,16 @@ function registerMainWindowEvent(mainWindow) {
   });
   ipcMain.on('remove-browser', () => {
     mainWindow.removeBrowserView(mainWindow.getBrowserView());
-    if (browsingWindow) browsingWindow.removeBrowserView(browsingWindow.getBrowserView());
+    if (browsingWindow) {
+      const views = browsingWindow.getBrowserViews();
+      views.forEach((view) => {
+        browsingWindow.removeBrowserView(view);
+      });
+    }
     browserViews.forEach((view) => {
       view.destroy();
     });
+    pipControlView.destroy();
     if (browsingWindow) browsingWindow.hide();
   });
   ipcMain.on('update-pip-state', () => {
@@ -448,14 +464,57 @@ function registerMainWindowEvent(mainWindow) {
       view.webContents.openDevTools();
     });
   });
+  ipcMain.on('update-danmu-state', (evt, val) => {
+    pipControlView.webContents.executeJavaScript(`document.querySelector(".danmu").src = ${val} ? "../../src/renderer/assets/icon/danmu-default-icon.svg" : "../../src/renderer/assets/icon/noDanmu-default-icon.svg"`);
+  });
+  ipcMain.on('init-danmu-state', (evt, args) => {
+    pipControlView.webContents.executeJavaScript(
+      `const danmu = document.querySelector(".danmu");
+      danmu.src = ${args.barrageOpen} ? "../../src/renderer/assets/icon/danmu-default-icon.svg" : "../../src/renderer/assets/icon/noDanmu-default-icon.svg";
+      danmu.style.opacity = ${args.opacity};
+      danmu.style.cursor = ${args.opacity} === 1 ? "cursor" : "default"`,
+    );
+  });
+  ipcMain.on('pip', () => {
+    mainWindow.send('handle-exit-pip');
+  });
+  ipcMain.on('danmu', () => {
+    mainWindow.send('handle-danmu-display');
+  });
+  ipcMain.on('mousemove', () => {
+    if (browsingWindow && browsingWindow.isFocused()) {
+      pipControlView.webContents.executeJavaScript('document.querySelector(".pip-buttons").style.display = "";');
+      if (pipTimer) {
+        clearTimeout(pipTimer);
+      }
+      pipTimer = setTimeout(() => {
+        pipControlView.webContents.executeJavaScript('document.querySelector(".pip-buttons").style.display = "none";');
+      }, 3000);
+    }
+  });
+  ipcMain.on('mouseenter', () => {
+    if (pipTimer) {
+      clearTimeout(pipTimer);
+    }
+  });
+  ipcMain.on('mouseleave', () => {
+    if (browsingWindow && browsingWindow.isFocused()) {
+      if (pipTimer) {
+        clearTimeout(pipTimer);
+      }
+      pipControlView.webContents.executeJavaScript('document.querySelector(".pip-buttons").style.display = "none";');
+    }
+  });
   ipcMain.on('enter-pip', () => {
     const mainView = mainWindow.getBrowserView();
+    createPipControlView();
     if (!browsingWindow) {
       createBrowsingWindow();
       browsingWindow.openDevTools();
       const browView = BrowserView.getAllViews().find(view => view.id !== mainView.id);
       mainWindow.removeBrowserView(mainView);
       browsingWindow.addBrowserView(mainView);
+      browsingWindow.addBrowserView(pipControlView);
       mainWindow.addBrowserView(browView);
       browsingWindow.show();
     } else {
@@ -464,18 +523,30 @@ function registerMainWindowEvent(mainWindow) {
       browsingWindow.removeBrowserView(browView);
       mainWindow.addBrowserView(browView);
       browsingWindow.addBrowserView(mainView);
+      browsingWindow.addBrowserView(pipControlView);
       browsingWindow.show();
     }
+    browsingWindow.blur();
+    browsingWindow.focus();
+    pipControlView.webContents.openDevTools();
+    pipControlView.webContents.loadURL(`file:${require('path').resolve(__static, 'pip/pipControl.html')}`);
+    pipControlView.setBackgroundColor('#00FFFFFF');
+  });
+  ipcMain.on('set-control-bounds', (evt, args) => {
+    if (pipControlView) pipControlView.setBounds(args);
   });
   ipcMain.on('exit-pip', () => {
     const mainView = mainWindow.getBrowserView();
-    const browView = browsingWindow.getBrowserView();
+    const browViews = browsingWindow.getBrowserViews();
     mainWindow.removeBrowserView(mainView);
-    if (browsingWindow) browsingWindow.removeBrowserView(browView);
+    if (browsingWindow) {
+      browsingWindow.removeBrowserView(browViews[0]);
+      browsingWindow.removeBrowserView(pipControlView);
+    }
     if (mainView.webContents.canGoBack()) {
       mainView.webContents.goBack();
     }
-    mainWindow.addBrowserView(browView);
+    mainWindow.addBrowserView(browViews[0]);
     if (browsingWindow) browsingWindow.addBrowserView(mainView);
     if (browsingWindow) {
       if (browsingWindow.isFullScreen()) {
diff --git a/src/renderer/components/BrowsingPip.vue b/src/renderer/components/BrowsingPip.vue
index aed6a7548e..39db8004b1 100644
--- a/src/renderer/components/BrowsingPip.vue
+++ b/src/renderer/components/BrowsingPip.vue
@@ -3,8 +3,6 @@
 </template>
 
 <script lang="ts">
-// @ts-ignore
-import urlParseLax from 'url-parse-lax';
 import { throttle } from 'lodash';
 import electron from 'electron';
 
@@ -15,11 +13,6 @@ export default {
       supportedRecordHost: ['www.youtube.com', 'www.bilibili.com', 'www.iqiyi.com'],
     };
   },
-  computed: {
-    currentBrowserView() {
-      return electron.remote.BrowserView.getAllViews()[0];
-    },
-  },
   mounted() {
     window.addEventListener('focus', () => {
       electron.ipcRenderer.send('update-focused-window', false);
@@ -27,7 +20,14 @@ export default {
       electron.ipcRenderer.send('update-enabled', 'window.keepPlayingWindowFront', true);
     });
     window.addEventListener('resize', throttle(() => {
-      electron.ipcRenderer.send('pip-window-size', electron.remote.getCurrentWindow().getSize());
+      const size = electron.remote.getCurrentWindow().getSize();
+      electron.ipcRenderer.send('pip-window-size', size);
+      electron.ipcRenderer.send('set-control-bounds', {
+        x: Math.round(size[0] - 65),
+        y: Math.round(size[1] / 2 - 54),
+        width: 50,
+        height: 104,
+      });
     }, 100));
     window.addEventListener('beforeunload', () => {
       electron.ipcRenderer.send('store-pip-pos');
@@ -40,115 +40,6 @@ export default {
       }
       electron.ipcRenderer.send('update-pip-state');
     });
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    this.currentBrowserView.webContents.addListener('ipc-message', (evt: any, channel: string, args: any) => { // https://github.com/electron/typescript-definitions/issues/27 fixed in 6.0.0
-      switch (channel) {
-        case 'open-url':
-          this.handleOpenUrl(args);
-          break;
-        case 'dragover':
-        case 'dragleave':
-          this.maskToShow = args.dragover;
-          break;
-        case 'drop':
-          this.maskToShow = false;
-          if ((args.files as string[]).length) {
-            this.currentBrowserView.setBounds({
-              x: 0, y: 36, width: 0, height: 0,
-            });
-            this.dropFiles = args.files;
-          }
-          break;
-        case 'mousemove':
-          if (this.isPip) {
-            this.timeout = true;
-            if (this.timer) {
-              clearTimeout(this.timer);
-            }
-            this.timer = setTimeout(() => {
-              this.timeout = false;
-            }, 3000);
-          }
-          break;
-        case 'left-drag':
-          if (this.isPip) {
-            if (args.windowSize) {
-              electron.ipcRenderer.send('callBrowsingWindowMethod', 'setBounds', [{
-                x: args.x,
-                y: args.y,
-                width: args.windowSize[0],
-                height: args.windowSize[1],
-              }]);
-            } else {
-              electron.ipcRenderer.send('callBrowsingWindowMethod', 'setPosition', [args.x, args.y]);
-            }
-          }
-          break;
-        case 'fullscreenchange':
-          electron.ipcRenderer.send('update-header-to-show', !args.isFullScreen);
-          break;
-        case 'keydown':
-          if (['INPUT', 'TEXTAREA'].includes(args.targetName as string)) {
-            this.acceleratorAvailable = false;
-          }
-          break;
-        default:
-          console.warn(`Unhandled ipc-message: ${channel}`, args);
-          break;
-      }
-    });
-    this.currentBrowserView.webContents.addListener('dom-ready', () => { // for webview test
-      window.focus();
-      this.currentBrowserView.webContents.focus();
-      if (process.env.NODE_ENV === 'development') this.currentBrowserView.webContents.openDevTools();
-    });
-    // https://github.com/electron/typescript-definitions/issues/27 fixed in 6.0.0
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    this.currentBrowserView.webContents.addListener('new-window', (e: any, url: string, disposition: string) => {
-      if (disposition !== 'new-window') {
-        this.handleOpenUrl({ url });
-      }
-    });
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    this.currentBrowserView.webContents.addListener('did-start-navigation', (e: any, url: string) => {
-      if (!url || url === 'about:blank') return;
-      this.startTime = new Date().getTime();
-      this.loadingState = true;
-      const loadUrl = this.currentBrowserView.webContents.getURL();
-      this.currentUrl = loadUrl;
-      const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
-      if (recordIndex !== -1) {
-        switch (recordIndex) {
-          case 0:
-            // this.updateRecordUrl({ youtube: loadUrl });
-            break;
-          case 1:
-            // this.updateRecordUrl({ bilibili: loadUrl });
-            break;
-          case 2:
-            // this.updateRecordUrl({ iqiyi: loadUrl });
-            break;
-          default:
-            break;
-        }
-      }
-    });
-    // this.currentBrowserView.webContents.addListener('did-stop-loading', () => {
-    //   const loadingTime: number = new Date().getTime() - this.startTime;
-    //   if (loadingTime % 3000 === 0) {
-    //     this.loadingState = false;
-    //   } else {
-    //     setTimeout(() => {
-    //       this.loadingState = false;
-    //     }, 3000 - (loadingTime % 3000));
-    //   }
-    // });
-  },
-  methods: {
-    handleOpenUrl({ url }: { url: string }) {
-      if (!url || url === 'about:blank') return;
-      this.currentBrowserView.webContents.loadURL(urlParseLax(url).protocol ? url : `https:${url}`);
-    },
   },
 };
 </script>
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 148421dc9c..c4e2f49465 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -74,7 +74,6 @@ import youtube from '../../shared/pip/youtube';
 import iqiyi, { iqiyiBarrageAdapt } from '../../shared/pip/iqiyi';
 import globalPip from '../../shared/pip/others';
 import { getValidVideoRegex, getValidSubtitleRegex } from '../../shared/utils';
-import MenuService from '@/services/menu/MenuService';
 
 export default {
   name: 'BrowsingView',
@@ -103,7 +102,6 @@ export default {
       pipBtnsKeepShow: false,
       asyncTasksDone: false,
       headerToShow: true,
-      menuService: null,
       pipRestore: false,
       acceleratorAvailable: true,
       oldDisplayId: -1,
@@ -143,6 +141,9 @@ export default {
     },
   },
   watch: {
+    barrageOpen(val: boolean) {
+      this.$electron.ipcRenderer.send('update-danmu-state', val);
+    },
     dropFiles(val: string[]) {
       this.backToLandingView = false;
       const onlyFolders = val.every((file: fs.PathLike) => fs.statSync(file).isDirectory());
@@ -159,7 +160,6 @@ export default {
       }
     },
     isPip(val: boolean) {
-      this.menuService.updatePip(val);
       if (val) {
         this.$electron.ipcRenderer.send('enter-pip');
         this.$store.dispatch('updateBrowsingSize', this.winSize);
@@ -172,6 +172,8 @@ export default {
           this.timeout = false;
         }, 3000);
         this.pipAdapter();
+        const opacity = ['youtube', 'others'].includes(this.pipType) || (this.pipType === 'bilibili' && this.bilibiliType === 'others') ? 0.2 : 1;
+        this.$electron.ipcRenderer.send('init-danmu-state', { opacity, barrageOpen: opacity === 1 ? this.barrageOpen : false });
       } else {
         if (!this.browsingWindowClose) {
           this.$electron.ipcRenderer.send('exit-pip');
@@ -189,6 +191,109 @@ export default {
           this.othersRecover();
         }
       }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any,complexity
+      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('ipc-message', (evt: Event, channel: string, args: any) => { // https://github.com/electron/typescript-definitions/issues/27 fixed in 6.0.0
+        switch (channel) {
+          case 'open-url':
+            this.handleOpenUrl(args);
+            break;
+          case 'dragover':
+          case 'dragleave':
+            this.maskToShow = args.dragover;
+            break;
+          case 'drop':
+            this.maskToShow = false;
+            if ((args.files as string[]).length) {
+              this.$electron.remote.getCurrentWindow().getBrowserViews()[0].setBounds({
+                x: 0, y: 36, width: 0, height: 0,
+              });
+              this.dropFiles = args.files;
+            }
+            break;
+          case 'mousemove':
+            if (this.isPip) {
+              this.timeout = true;
+              if (this.timer) {
+                clearTimeout(this.timer);
+              }
+              this.timer = setTimeout(() => {
+                this.timeout = false;
+              }, 3000);
+            }
+            break;
+          case 'left-drag':
+            if (this.isPip) {
+              if (args.windowSize) {
+                this.$electron.ipcRenderer.send('callBrowsingWindowMethod', 'setBounds', [{
+                  x: args.x,
+                  y: args.y,
+                  width: args.windowSize[0],
+                  height: args.windowSize[1],
+                }]);
+              } else {
+                this.$electron.ipcRenderer.send('callBrowsingWindowMethod', 'setPosition', [args.x, args.y]);
+              }
+            }
+            break;
+          case 'fullscreenchange':
+            if (!this.isPip) {
+              this.headerToShow = !args.isFullScreen;
+            }
+            break;
+          case 'keydown':
+            if (['INPUT', 'TEXTAREA'].includes(args.targetName as string)) {
+              this.acceleratorAvailable = false;
+            }
+            break;
+          default:
+            console.warn(`Unhandled ipc-message: ${channel}`, args);
+            break;
+        }
+      });
+      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('dom-ready', () => { // for webview test
+        window.focus();
+        this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.focus();
+        if (process.env.NODE_ENV === 'development') this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.openDevTools();
+      });
+      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('new-window', (e: Event, url: string, disposition: string) => {
+        if (disposition !== 'new-window') {
+          this.handleOpenUrl({ url });
+        }
+      });
+      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('did-start-navigation', (e: Event, url: string) => {
+        if (!url || url === 'about:blank') return;
+        this.startTime = new Date().getTime();
+        this.loadingState = true;
+        const loadUrl = this.$electron.remote.getCurrentWindow()
+          .getBrowserViews()[0].webContents.getURL();
+        this.currentUrl = loadUrl;
+        const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
+        if (recordIndex !== -1) {
+          switch (recordIndex) {
+            case 0:
+              this.updateRecordUrl({ youtube: loadUrl });
+              break;
+            case 1:
+              this.updateRecordUrl({ bilibili: loadUrl });
+              break;
+            case 2:
+              this.updateRecordUrl({ iqiyi: loadUrl });
+              break;
+            default:
+              break;
+          }
+        }
+      });
+      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('did-stop-loading', () => {
+        const loadingTime: number = new Date().getTime() - this.startTime;
+        if (loadingTime % 3000 === 0) {
+          this.loadingState = false;
+        } else {
+          setTimeout(() => {
+            this.loadingState = false;
+          }, 3000 - (loadingTime % 3000));
+        }
+      });
     },
     pipSize() {
       if (this.isPip && this.pipType !== 'youtube') {
@@ -203,10 +308,10 @@ export default {
     },
     loadingState(val: boolean) {
       const loadUrl = this.$electron.remote.getCurrentWindow()
-        .getBrowserView().webContents.getURL();
+        .getBrowserViews()[0].webContents.getURL();
       const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
-      this.$electron.ipcRenderer.send('update-enabled', 'history.back', this.$electron.remote.getCurrentWindow().getBrowserView().webContents.canGoBack());
-      this.$electron.ipcRenderer.send('update-enabled', 'history.forward', this.$electron.remote.getCurrentWindow().getBrowserView().webContents.canGoForward());
+      this.$electron.ipcRenderer.send('update-enabled', 'history.back', this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.canGoBack());
+      this.$electron.ipcRenderer.send('update-enabled', 'history.forward', this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.canGoForward());
       if (val) {
         this.hasVideo = false;
         this.$electron.ipcRenderer.send('update-enabled', 'window.pip', false);
@@ -214,16 +319,16 @@ export default {
           hasVideo: this.hasVideo,
           url: loadUrl,
           canGoBack: this.$electron.remote.getCurrentWindow()
-            .getBrowserView().webContents.canGoBack(),
+            .getBrowserViews()[0].webContents.canGoBack(),
           canGoForward: this.$electron.remote.getCurrentWindow()
-            .getBrowserView().webContents.canGoForward(),
+            .getBrowserViews()[0].webContents.canGoForward(),
         });
       } else {
         if (this.pipRestore) {
           this.pipAdapter();
           this.pipRestore = false;
         }
-        this.$electron.remote.getCurrentWindow().getBrowserView().webContents
+        this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
           .executeJavaScript(this.calculateVideoNum, (r: number) => {
             this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
             this.$electron.ipcRenderer.send('update-enabled', 'window.pip', this.hasVideo);
@@ -231,15 +336,15 @@ export default {
               hasVideo: this.hasVideo,
               url: loadUrl,
               canGoBack: this.$electron.remote.getCurrentWindow()
-                .getBrowserView().webContents.canGoBack(),
+                .getBrowserViews()[0].webContents.canGoBack(),
               canGoForward: this.$electron.remote.getCurrentWindow()
-                .getBrowserView().webContents.canGoForward(),
+                .getBrowserViews()[0].webContents.canGoForward(),
             });
           });
       }
     },
     headerToShow(val: boolean) {
-      const currentView = this.$electron.remote.getCurrentWindow().getBrowserView();
+      const currentView = this.$electron.remote.getCurrentWindow().getBrowserViews()[0];
       if (!val) {
         currentView.setBounds({
           x: 0, y: 0, width: window.screen.width, height: window.screen.height,
@@ -260,14 +365,13 @@ export default {
     );
     this.$store.dispatch('updateBrowsingPos', this.winPos);
     this.$electron.ipcRenderer.send('callMainWindowMethod', 'setAspectRatio', [0]);
-    this.$electron.remote.getCurrentWindow().getBrowserView().setBounds({
+    this.$electron.remote.getCurrentWindow().getBrowserViews()[0].setBounds({
       x: 0, y: 36, width: this.browsingSize[0], height: this.browsingSize[1] - 36,
     });
     this.$electron.remote.getCurrentWindow()
-      .getBrowserView().setAutoResize({ width: true, height: true });
+      .getBrowserViews()[0].setAutoResize({ width: true, height: true });
   },
   mounted() {
-    this.menuService = new MenuService();
     this.$bus.$on('toggle-reload', this.handleUrlReload);
     this.$bus.$on('toggle-back', this.handleUrlBack);
     this.$bus.$on('toggle-forward', this.handleUrlForward);
@@ -286,13 +390,13 @@ export default {
     });
     window.addEventListener('focus', () => {
       this.$electron.ipcRenderer.send('update-focused-window', true);
-      this.$electron.ipcRenderer.send('update-enabled', 'history.back', this.$electron.remote.getCurrentWindow().getBrowserView().webContents.canGoBack());
-      this.$electron.ipcRenderer.send('update-enabled', 'history.forward', this.$electron.remote.getCurrentWindow().getBrowserView().webContents.canGoForward());
+      this.$electron.ipcRenderer.send('update-enabled', 'history.back', this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.canGoBack());
+      this.$electron.ipcRenderer.send('update-enabled', 'history.forward', this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.canGoForward());
       this.$electron.ipcRenderer.send('update-enabled', 'window.keepPlayingWindowFront', false);
       const loadUrl = this.$electron.remote.getCurrentWindow()
-        .getBrowserView().webContents.getURL();
+        .getBrowserViews()[0].webContents.getURL();
       const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
-      this.$electron.remote.getCurrentWindow().getBrowserView().webContents
+      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
         .executeJavaScript(this.calculateVideoNum, (r: number) => {
           this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
           this.$electron.ipcRenderer.send('update-enabled', 'window.pip', this.hasVideo);
@@ -350,11 +454,30 @@ export default {
         name: 'landing-view',
       });
     });
+    this.$electron.ipcRenderer.on('handle-exit-pip', () => {
+      this.handleExitPip();
+    });
+    this.$electron.ipcRenderer.on('handle-danmu-display', () => {
+      this.handleDanmuDisplay();
+    });
     this.$electron.ipcRenderer.on('store-pip-pos', (e: Event, pos: number[]) => {
       this.$store.dispatch('updatePipPos', pos);
     });
+    this.$electron.ipcRenderer.on('pip-window-size', (e: Event, size: number[]) => {
+      this.$store.dispatch('updatePipSize', size);
+    });
+    this.$electron.ipcRenderer.on('quit', () => {
+      this.quit = true;
+    });
+    this.$electron.ipcRenderer.on('update-header-to-show', (ev: Event, headerToShow: boolean) => {
+      this.headerToShow = headerToShow;
+    });
+    this.$electron.ipcRenderer.on('update-pip-state', () => {
+      this.browsingWindowClose = true;
+      this.updateIsPip(false);
+    });
     // eslint-disable-next-line @typescript-eslint/no-explicit-any,complexity
-    this.$electron.remote.getCurrentWindow().getBrowserView().webContents.addListener('ipc-message', (evt: Event, channel: string, args: any) => { // https://github.com/electron/typescript-definitions/issues/27 fixed in 6.0.0
+    this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('ipc-message', (evt: Event, channel: string, args: any) => { // https://github.com/electron/typescript-definitions/issues/27 fixed in 6.0.0
       switch (channel) {
         case 'open-url':
           this.handleOpenUrl(args);
@@ -366,7 +489,7 @@ export default {
         case 'drop':
           this.maskToShow = false;
           if ((args.files as string[]).length) {
-            this.$electron.remote.getCurrentWindow().getBrowserView().setBounds({
+            this.$electron.remote.getCurrentWindow().getBrowserViews()[0].setBounds({
               x: 0, y: 36, width: 0, height: 0,
             });
             this.dropFiles = args.files;
@@ -412,35 +535,22 @@ export default {
           break;
       }
     });
-    this.$electron.ipcRenderer.on('pip-window-size', (e: Event, size: number[]) => {
-      this.$store.dispatch('updatePipSize', size);
-    });
-    this.$electron.ipcRenderer.on('quit', () => {
-      this.quit = true;
-    });
-    this.$electron.ipcRenderer.on('update-header-to-show', (ev: Event, headerToShow: boolean) => {
-      this.headerToShow = headerToShow;
-    });
-    this.$electron.ipcRenderer.on('update-pip-state', () => {
-      this.browsingWindowClose = true;
-      this.updateIsPip(false);
-    });
-    this.$electron.remote.getCurrentWindow().getBrowserView().webContents.addListener('dom-ready', () => { // for webview test
+    this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('dom-ready', () => { // for webview test
       window.focus();
-      this.$electron.remote.getCurrentWindow().getBrowserView().webContents.focus();
-      if (process.env.NODE_ENV === 'development') this.$electron.remote.getCurrentWindow().getBrowserView().webContents.openDevTools();
+      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.focus();
+      if (process.env.NODE_ENV === 'development') this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.openDevTools();
     });
-    this.$electron.remote.getCurrentWindow().getBrowserView().webContents.addListener('new-window', (e: Event, url: string, disposition: string) => {
+    this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('new-window', (e: Event, url: string, disposition: string) => {
       if (disposition !== 'new-window') {
         this.handleOpenUrl({ url });
       }
     });
-    this.$electron.remote.getCurrentWindow().getBrowserView().webContents.addListener('did-start-navigation', (e: Event, url: string) => {
+    this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('did-start-navigation', (e: Event, url: string) => {
       if (!url || url === 'about:blank') return;
       this.startTime = new Date().getTime();
       this.loadingState = true;
       const loadUrl = this.$electron.remote.getCurrentWindow()
-        .getBrowserView().webContents.getURL();
+        .getBrowserViews()[0].webContents.getURL();
       this.currentUrl = loadUrl;
       const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
       if (recordIndex !== -1) {
@@ -459,7 +569,7 @@ export default {
         }
       }
     });
-    this.$electron.remote.getCurrentWindow().getBrowserView().webContents.addListener('did-stop-loading', () => {
+    this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('did-stop-loading', () => {
       const loadingTime: number = new Date().getTime() - this.startTime;
       if (loadingTime % 3000 === 0) {
         this.loadingState = false;
@@ -503,7 +613,7 @@ export default {
       if (this.isPip) {
         this.updateIsPip(false);
       }
-      this.$electron.remote.getCurrentWindow().getBrowserView().webContents.loadURL(urlParseLax(url).protocol ? url : `https:${url}`);
+      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.loadURL(urlParseLax(url).protocol ? url : `https:${url}`);
     },
     pipAdapter() {
       const parseUrl = urlParseLax(this.currentUrl);
@@ -531,10 +641,14 @@ export default {
     handleMouseleave() {
       this.pipBtnsKeepShow = false;
     },
+    currentPipBrowserView() {
+      const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserViews()[0];
+      return this.$electron.remote.BrowserView.getAllViews().filter(
+        (view: Electron.BrowserView) => view.id !== currentBrowserView.id && view.id <= 2,
+      )[0];
+    },
     handleWindowChangeEnterPip() {
-      const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
-      const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
-        .filter((view: Electron.BrowserView) => view.id !== currentBrowserView.id)[0];
+      const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserViews()[0];
       const newDisplayId = this.$electron.remote.screen
         .getDisplayNearestPoint({ x: this.winPos[0], y: this.winPos[1] }).id;
       const useDefaultPosition = !this.pipPos.length
@@ -544,7 +658,7 @@ export default {
         x: 0, y: 36, width: this.winSize[0], height: this.winSize[1] - 36,
       });
       currentBrowserView.setAutoResize({ width: true, height: true });
-      currentPipBrowserView.webContents
+      this.currentPipBrowserView().webContents
         .executeJavaScript(this.getVideoStyle, (result: CSSStyleDeclaration) => {
           const videoAspectRatio = parseFloat(result.width as string)
             / parseFloat(result.height as string);
@@ -564,8 +678,14 @@ export default {
             ? [this.pipSize[0], Math.round(this.pipSize[0] / videoAspectRatio)]
             : [Math.round(this.pipSize[1] * videoAspectRatio), this.pipSize[1]];
           this.$electron.ipcRenderer.send('callBrowsingWindowMethod', 'setSize', calculateSize);
-          currentPipBrowserView.setBounds({
-            x: 0, y: 0, width: calculateSize[0], height: calculateSize[1],
+          this.$electron.ipcRenderer.send('set-control-bounds', {
+            x: Math.round(calculateSize[0] - 65),
+            y: Math.round(calculateSize[1] / 2 - 54),
+            width: 50,
+            height: 104,
+          });
+          this.currentPipBrowserView().setBounds({
+            x: 0, y: 0, width: Math.round(calculateSize[0]), height: Math.round(calculateSize[1]),
           });
         });
     },
@@ -573,8 +693,8 @@ export default {
       const newDisplayId = this.$electron.remote.screen
         .getDisplayNearestPoint({ x: this.winPos[0], y: this.winPos[1] }).id;
       this.$electron.remote.getCurrentWindow()
-        .getBrowserView().setAutoResize({ width: false, height: false });
-      this.$electron.remote.getCurrentWindow().getBrowserView().setBounds({
+        .getBrowserViews()[0].setAutoResize({ width: false, height: false });
+      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].setBounds({
         x: 0, y: 36, width: this.winSize[0], height: this.winSize[1] - 36,
       });
       // if (this.oldDisplayId !== newDisplayId) {
@@ -591,35 +711,34 @@ export default {
       // this.$electron.ipcRenderer.send('callMainWindowMethod', 'setAspectRatio', [0]);
       // this.$electron.ipcRenderer.send('callMainWindowMethod', 'setMinimumSize', [570, 375]);
       this.$electron.remote.getCurrentWindow()
-        .getBrowserView().setAutoResize({ width: true, height: true });
+        .getBrowserViews()[0].setAutoResize({ width: true, height: true });
     },
     handleDanmuDisplay() {
       if (this.pipType === 'iqiyi') {
         this.updateBarrageOpen(!this.barrageOpen);
-        this.$electron.remote.getCurrentWindow()
-          .getBrowserView().webContents.executeJavaScript(this.iqiyiBarrage);
+        this.currentPipBrowserView().webContents.executeJavaScript(this.iqiyiBarrage);
       } else if (this.pipType === 'bilibili') {
         this.updateBarrageOpen(!this.barrageOpen);
-        this.$electron.remote.getCurrentWindow()
-          .getBrowserView().webContents.executeJavaScript(this.bilibiliBarrage);
+        this.currentPipBrowserView().webContents.executeJavaScript(this.bilibiliBarrage);
       }
     },
     handleUrlForward() {
-      if (this.$electron.remote.getCurrentWindow().getBrowserView().webContents.canGoForward()) {
-        this.$electron.remote.getCurrentWindow().getBrowserView().webContents.goForward();
+      if (this.$electron.remote.getCurrentWindow()
+        .getBrowserViews()[0].webContents.canGoForward()) {
+        this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.goForward();
       }
     },
     handleUrlBack() {
-      if (this.$electron.remote.getCurrentWindow().getBrowserView().webContents.canGoBack()) {
-        this.$electron.remote.getCurrentWindow().getBrowserView().webContents.goBack();
+      if (this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.canGoBack()) {
+        this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.goBack();
       }
     },
     handleUrlReload() {
       if (this.isPip) {
         this.pipRestore = true;
-        this.$electron.remote.getCurrentWindow().getBrowserView().webContents.reload();
+        this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.reload();
       } else {
-        this.$electron.remote.getCurrentWindow().getBrowserView().webContents.reload();
+        this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.reload();
       }
     },
     handleEnterPip() {
@@ -633,71 +752,50 @@ export default {
       }
     },
     othersAdapter() {
-      const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
-      const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
-        .filter((view: Electron.BrowserView) => view.id !== currentBrowserView.id)[0];
       this.handleWindowChangeEnterPip();
-      currentPipBrowserView.webContents.executeJavaScript(this.othersPip.adapter);
+      this.currentPipBrowserView().webContents.executeJavaScript(this.othersPip.adapter);
     },
     othersWatcher() {
-      const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
-      const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
-        .filter((view: Electron.BrowserView) => view.id !== currentBrowserView.id)[0];
-      currentPipBrowserView.webContents.executeJavaScript(this.othersPip.watcher);
+      this.currentPipBrowserView().webContents.executeJavaScript(this.othersPip.watcher);
     },
     othersRecover() {
       this.$electron.remote.getCurrentWindow()
-        .getBrowserView().webContents.executeJavaScript(this.othersPip.recover);
+        .getBrowserViews()[0].webContents.executeJavaScript(this.othersPip.recover);
     },
     iqiyiAdapter() {
-      const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
-      const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
-        .filter((view: Electron.BrowserView) => view.id !== currentBrowserView.id)[0];
       this.handleWindowChangeEnterPip();
-      currentPipBrowserView.webContents.executeJavaScript(this.iqiyiPip.adapter);
+      this.currentPipBrowserView().webContents.executeJavaScript(this.iqiyiPip.adapter);
     },
     iqiyiWatcher() {
-      const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
-      const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
-        .filter((view: Electron.BrowserView) => view.id !== currentBrowserView.id)[0];
-      currentPipBrowserView.webContents.executeJavaScript(this.iqiyiPip.watcher);
+      this.currentPipBrowserView().webContents.executeJavaScript(this.iqiyiPip.watcher);
     },
     iqiyiRecover() {
       this.$electron.remote.getCurrentWindow()
-        .getBrowserView().webContents.executeJavaScript(this.iqiyiPip.recover);
+        .getBrowserViews()[0].webContents.executeJavaScript(this.iqiyiPip.recover);
     },
     youtubeAdapter() {
-      const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
-      const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
-        .filter((view: Electron.BrowserView) => view.id !== currentBrowserView.id)[0];
       this.handleWindowChangeEnterPip();
-      currentPipBrowserView.webContents.executeJavaScript(youtube.adapter);
+      this.currentPipBrowserView().webContents.executeJavaScript(youtube.adapter);
     },
     youtubeRecover() {
       this.$electron.remote.getCurrentWindow()
-        .getBrowserView().webContents.executeJavaScript(youtube.recover);
+        .getBrowserViews()[0].webContents.executeJavaScript(youtube.recover);
     },
     bilibiliAdapter() {
-      const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
-      const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
-        .filter((view: Electron.BrowserView) => view.id !== currentBrowserView.id)[0];
-      currentPipBrowserView.webContents
+      this.currentPipBrowserView().webContents
         .executeJavaScript(bilibiliFindType, (r: (HTMLElement | null)[]) => {
           this.bilibiliType = ['bangumi', 'videoStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
         }).then(() => {
           this.handleWindowChangeEnterPip();
-          currentPipBrowserView.webContents.executeJavaScript(this.bilibiliPip.adapter);
+          this.currentPipBrowserView().webContents.executeJavaScript(this.bilibiliPip.adapter);
         });
     },
     bilibiliWatcher() {
-      const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserView();
-      const currentPipBrowserView = this.$electron.remote.BrowserView.getAllViews()
-        .filter((view: Electron.BrowserView) => view.id !== currentBrowserView.id)[0];
-      currentPipBrowserView.webContents.executeJavaScript(this.bilibiliPip.watcher);
+      this.currentPipBrowserView().webContents.executeJavaScript(this.bilibiliPip.watcher);
     },
     bilibiliRecover() {
       this.$electron.remote.getCurrentWindow()
-        .getBrowserView().webContents.executeJavaScript(this.bilibiliPip.recover);
+        .getBrowserViews()[0].webContents.executeJavaScript(this.bilibiliPip.recover);
     },
   },
 };
diff --git a/src/renderer/services/menu/MenuService.ts b/src/renderer/services/menu/MenuService.ts
index f6ca4ed979..66032aadd3 100644
--- a/src/renderer/services/menu/MenuService.ts
+++ b/src/renderer/services/menu/MenuService.ts
@@ -36,10 +36,6 @@ export default class MenuService {
     ipcRenderer.send('update-browsingview-on-top', topOnWindow);
   }
 
-  public updatePip(isPip: boolean) {
-    ipcRenderer.send('update-pip', isPip);
-  }
-
   public updateMenuItemChecked(id: string, checked: boolean) {
     ipcRenderer.send('update-checked', id, checked);
   }
diff --git a/static/pip/pipControl.html b/static/pip/pipControl.html
new file mode 100644
index 0000000000..b9e711cf91
--- /dev/null
+++ b/static/pip/pipControl.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      user-select: none;
+    }
+    .pip-buttons {
+      width: 20px;
+      height: auto;
+      display: flex;
+      padding: 22px 15px 22px 15px;
+      border-radius: 40px;
+      flex-direction: column;
+      justify-content: space-between;
+      position: absolute;
+      background: rgba(0, 0, 0, 0.4);
+      z-index: 100;
+    }
+    .danmu, .pip {
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+    }
+    .danmu {
+      margin-bottom: 20px;
+    }
+    .pip:active, .danmu:active {
+      opacity: 0.1667;
+    }
+  </style>
+</head>
+<body draggable="false">
+  <div class="pip-buttons" draggable="false">
+    <img class="danmu" src="../../src/renderer/assets/icon/noDanmu-default-icon.svg" draggable="false">
+    <img class="pip" src="../../src/renderer/assets/icon/pipBack-default-icon.svg" draggable="false">
+  </div>
+</body>
+</html>
diff --git a/static/pip/preload.js b/static/pip/preload.js
index 2007508269..603815397b 100644
--- a/static/pip/preload.js
+++ b/static/pip/preload.js
@@ -8,6 +8,7 @@ let mousedown = false;
 let isDragging = false;
 let mousedownPos = null;
 let windowSize = null;
+let pipTimer = 0;
 function sendToHost(channel, message) {
   ipcRenderer.send(channel, message);
 }
@@ -16,6 +17,39 @@ function getRatio() {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
+  const danmu = document.querySelector('.danmu');
+  const pip = document.querySelector('.pip');
+  const pipBtns = document.querySelector('.pip-buttons');
+  if (pipBtns) {
+    pipBtns.style.display = '';
+    pipBtns.addEventListener('mouseenter', () => {
+      if (pipTimer) clearTimeout(pipTimer);
+      sendToHost('mouseenter', 'mouseenter');
+      pipBtns.style.display = '';
+    });
+    pipTimer = setTimeout(() => {
+      pipBtns.style.display = 'none';
+    }, 3000);
+  }
+  if (danmu) {
+    danmu.addEventListener('mouseup', () => {
+      sendToHost('danmu', 'danmu');
+    });
+  }
+  if (pip) {
+    pip.addEventListener('mouseup', () => {
+      sendToHost('pip', 'pip');
+    });
+  }
+  window.addEventListener('mouseleave', (evt) => {
+    if (!pipBtns) {
+      const winSize = remote.getCurrentWindow().getSize();
+      if (evt.pageX <= 0 || evt.pageY <= 0
+        || evt.pageX >= winSize[0] || evt.pageY >= winSize[1]) {
+        sendToHost('mouseleave', 'leave');
+      }
+    }
+  }, true);
   window.addEventListener('mousedown', (evt) => {
     mousedown = true;
     mousedownPos = [evt.clientX, evt.clientY];
@@ -43,7 +77,10 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
   window.addEventListener('mousemove', (evt) => {
-    sendToHost('mousemove', 'isMoving');
+    if (!pipBtns && remote.getCurrentWindow().getBrowserViews().length > 1) {
+      if (pipTimer) clearTimeout(pipTimer);
+      sendToHost('mousemove', 'isMoving');
+    }
     if (mousedown) isDragging = true;
   }, true);
   window.addEventListener('click', (evt) => {

From 2a794c80a2158d3f58152c1547ceb172619a9f55 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Wed, 14 Aug 2019 18:42:00 +0800
Subject: [PATCH 006/123] feat(browsingview): support to shift pip in two
 windows

---
 src/main/index.js                        |  47 +++++--
 src/renderer/components/BrowsingPip.vue  |   8 +-
 src/renderer/components/BrowsingView.vue | 168 +++++++----------------
 src/renderer/main.ts                     |   2 +-
 4 files changed, 88 insertions(+), 137 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index e72e0fc839..991c953921 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -69,6 +69,7 @@ let pipControlView = null;
 let browserViews = [];
 let tray = null;
 let pipTimer = 0;
+let initialUrl = '';
 let needToRestore = false;
 let inited = false;
 let hideBrowsingWindow = false;
@@ -127,6 +128,7 @@ function handleBossKey() {
 }
 
 function createPipControlView() {
+  if (pipControlView) pipControlView.destroy();
   pipControlView = new BrowserView({
     webPreferences: {
       preload: `${require('path').resolve(__static, 'pip/preload.js')}`,
@@ -424,8 +426,17 @@ function registerMainWindowEvent(mainWindow) {
   ipcMain.on('pip-window-size', (evt, size) => {
     mainWindow.send('pip-window-size', size);
   });
+  ipcMain.on('pip-window-close', () => {
+    const views = browsingWindow.getBrowserViews();
+    browsingWindow.removeBrowserView(views[0]);
+    browsingWindow.removeBrowserView(views[1]);
+    views[0].webContents.loadURL(initialUrl).then(() => {
+      views[0].webContents.clearHistory();
+    });
+  });
   ipcMain.on('remove-browser', () => {
-    mainWindow.removeBrowserView(mainWindow.getBrowserView());
+    const mainView = mainWindow.getBrowserView();
+    mainWindow.removeBrowserView(mainView);
     if (browsingWindow) {
       const views = browsingWindow.getBrowserViews();
       views.forEach((view) => {
@@ -433,17 +444,18 @@ function registerMainWindowEvent(mainWindow) {
       });
     }
     browserViews.forEach((view) => {
-      view.destroy();
+      view.webContents.loadURL(initialUrl).then(() => {
+        view.webContents.clearHistory();
+      });
     });
-    pipControlView.destroy();
     if (browsingWindow) browsingWindow.hide();
   });
   ipcMain.on('update-pip-state', () => {
     mainWindow.send('update-pip-state');
   });
   ipcMain.on('create-browser-view', (evt, args) => {
-    const isDestroyed = browserViews.filter(view => view.isDestroyed()).length;
-    if (!browserViews.length || isDestroyed) {
+    initialUrl = args.url;
+    if (!browserViews.length) {
       browserViews = [
         new BrowserView({
           webPreferences: {
@@ -505,17 +517,34 @@ function registerMainWindowEvent(mainWindow) {
       pipControlView.webContents.executeJavaScript('document.querySelector(".pip-buttons").style.display = "none";');
     }
   });
+  ipcMain.on('shift-pip', () => {
+    const mainView = mainWindow.getBrowserView();
+    mainWindow.removeBrowserView(mainView);
+    browsingWindow.getBrowserViews().forEach((view) => {
+      browsingWindow.removeBrowserView(view);
+      view.webContents.loadURL(initialUrl);
+    });
+    createPipControlView();
+    browsingWindow.addBrowserView(mainView);
+    browsingWindow.addBrowserView(pipControlView);
+    mainWindow.addBrowserView(browserViews.find(view => view.id !== mainView.id));
+    pipControlView.webContents.openDevTools();
+    pipControlView.webContents.loadURL(`file:${require('path').resolve(__static, 'pip/pipControl.html')}`);
+    pipControlView.setBackgroundColor('#00FFFFFF');
+    browsingWindow.blur();
+    browsingWindow.focus();
+  });
   ipcMain.on('enter-pip', () => {
     const mainView = mainWindow.getBrowserView();
     createPipControlView();
     if (!browsingWindow) {
       createBrowsingWindow();
       browsingWindow.openDevTools();
-      const browView = BrowserView.getAllViews().find(view => view.id !== mainView.id);
+      const browView = browserViews.find(view => view.id !== mainView.id);
       mainWindow.removeBrowserView(mainView);
+      mainWindow.addBrowserView(browView);
       browsingWindow.addBrowserView(mainView);
       browsingWindow.addBrowserView(pipControlView);
-      mainWindow.addBrowserView(browView);
       browsingWindow.show();
     } else {
       const browView = browsingWindow.getBrowserView();
@@ -526,11 +555,11 @@ function registerMainWindowEvent(mainWindow) {
       browsingWindow.addBrowserView(pipControlView);
       browsingWindow.show();
     }
-    browsingWindow.blur();
-    browsingWindow.focus();
     pipControlView.webContents.openDevTools();
     pipControlView.webContents.loadURL(`file:${require('path').resolve(__static, 'pip/pipControl.html')}`);
     pipControlView.setBackgroundColor('#00FFFFFF');
+    browsingWindow.blur();
+    browsingWindow.focus();
   });
   ipcMain.on('set-control-bounds', (evt, args) => {
     if (pipControlView) pipControlView.setBounds(args);
diff --git a/src/renderer/components/BrowsingPip.vue b/src/renderer/components/BrowsingPip.vue
index 39db8004b1..4966ea7737 100644
--- a/src/renderer/components/BrowsingPip.vue
+++ b/src/renderer/components/BrowsingPip.vue
@@ -31,13 +31,7 @@ export default {
     }, 100));
     window.addEventListener('beforeunload', () => {
       electron.ipcRenderer.send('store-pip-pos');
-      const view = electron.remote.getCurrentWindow().getBrowserView();
-      if (view) {
-        if (view.webContents.canGoBack()) {
-          view.webContents.goBack();
-        }
-        electron.remote.getCurrentWindow().removeBrowserView(view);
-      }
+      electron.ipcRenderer.send('pip-window-close');
       electron.ipcRenderer.send('update-pip-state');
     });
   },
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index c4e2f49465..5e09ad9c47 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -29,29 +29,6 @@
       v-show="loadingState && headerToShow"
       class="loading-state loading-animation"
     />
-    <div
-      v-show="isPip && timeout"
-      class="pip-buttons"
-    >
-      <Icon
-        :style="{
-          marginBottom: '12px',
-          cursor: pipType === 'youtube' ? 'default' : 'pointer',
-          opacity: danmuIconState,
-        }"
-        @mouseup.native="handleDanmuDisplay"
-        @mouseenter.native="handleMouseenter"
-        @mouseleave.native="handleMouseleave"
-        :type="danmuType"
-      />
-      <Icon
-        :style="{ cursor: 'pointer' }"
-        @mouseup.native="handleExitPip"
-        @mouseenter.native="handleMouseenter"
-        @mouseleave.native="handleMouseleave"
-        type="pipBack"
-      />
-    </div>
     <NotificationBubble />
   </div>
 </template>
@@ -66,7 +43,6 @@ import getVideoId from 'get-video-id';
 import { windowRectService } from '@/services/window/WindowRectService';
 import { Browsing as browsingActions } from '@/store/actionTypes';
 import BrowsingHeader from '@/components/BrowsingView/BrowsingHeader.vue';
-import Icon from '@/components/BaseIconContainer.vue';
 import asyncStorage from '@/helpers/asyncStorage';
 import NotificationBubble from '@/components/NotificationBubble.vue';
 import { bilibili, bilibiliFindType, bilibiliBarrageAdapt } from '../../shared/pip/bilibili';
@@ -79,7 +55,6 @@ export default {
   name: 'BrowsingView',
   components: {
     'browsing-header': BrowsingHeader,
-    Icon,
     NotificationBubble,
   },
   data() {
@@ -95,8 +70,6 @@ export default {
       dropFiles: [],
       hasVideo: false,
       currentUrl: '',
-      timeout: false,
-      timer: 0,
       calculateVideoNum: 'var iframe = document.querySelector("iframe");if (iframe && iframe.contentDocument) {document.getElementsByTagName("video").length + iframe.contentDocument.getElementsByTagName("video").length} else {document.getElementsByTagName("video").length}',
       getVideoStyle: 'getComputedStyle(document.querySelector("video") || document.querySelector("iframe").contentDocument.querySelector("video"))',
       pipBtnsKeepShow: false,
@@ -133,12 +106,6 @@ export default {
     othersPip() {
       return globalPip(this.pipSize);
     },
-    danmuType() {
-      return this.barrageOpen ? 'danmu' : 'noDanmu';
-    },
-    danmuIconState() {
-      return ['youtube', 'others'].includes(this.pipType) || (this.pipType === 'bilibili' && this.bilibiliType === 'others') ? 0.2 : 1;
-    },
   },
   watch: {
     barrageOpen(val: boolean) {
@@ -159,38 +126,7 @@ export default {
         this.$electron.ipcRenderer.send('drop-subtitle', val);
       }
     },
-    isPip(val: boolean) {
-      if (val) {
-        this.$electron.ipcRenderer.send('enter-pip');
-        this.$store.dispatch('updateBrowsingSize', this.winSize);
-        this.$store.dispatch('updateBrowsingPos', this.winPos);
-        this.timeout = true;
-        if (this.timer) {
-          clearTimeout(this.timer);
-        }
-        this.timer = setTimeout(() => {
-          this.timeout = false;
-        }, 3000);
-        this.pipAdapter();
-        const opacity = ['youtube', 'others'].includes(this.pipType) || (this.pipType === 'bilibili' && this.bilibiliType === 'others') ? 0.2 : 1;
-        this.$electron.ipcRenderer.send('init-danmu-state', { opacity, barrageOpen: opacity === 1 ? this.barrageOpen : false });
-      } else {
-        if (!this.browsingWindowClose) {
-          this.$electron.ipcRenderer.send('exit-pip');
-          this.$electron.ipcRenderer.send('store-pip-pos');
-          this.handleWindowChangeExitPip();
-        }
-        this.browsingWindowClose = false;
-        if (this.pipType === 'youtube') {
-          this.youtubeRecover();
-        } else if (this.pipType === 'bilibili') {
-          this.bilibiliRecover();
-        } else if (this.pipType === 'iqiyi') {
-          this.iqiyiRecover();
-        } else {
-          this.othersRecover();
-        }
-      }
+    isPip() {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any,complexity
       this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('ipc-message', (evt: Event, channel: string, args: any) => { // https://github.com/electron/typescript-definitions/issues/27 fixed in 6.0.0
         switch (channel) {
@@ -210,17 +146,6 @@ export default {
               this.dropFiles = args.files;
             }
             break;
-          case 'mousemove':
-            if (this.isPip) {
-              this.timeout = true;
-              if (this.timer) {
-                clearTimeout(this.timer);
-              }
-              this.timer = setTimeout(() => {
-                this.timeout = false;
-              }, 3000);
-            }
-            break;
           case 'left-drag':
             if (this.isPip) {
               if (args.windowSize) {
@@ -380,8 +305,14 @@ export default {
         if (this.acceleratorAvailable) {
           if (!state) {
             this.updateIsPip(false);
+            this.exitPipOperation();
           } else if (this.hasVideo) {
-            this.updateIsPip(true);
+            if (this.isPip) {
+              this.shiftPipOperation();
+            } else {
+              this.updateIsPip(true);
+              this.enterPipOperation();
+            }
           }
         } else {
           this.acceleratorAvailable = true;
@@ -426,27 +357,6 @@ export default {
         this.$electron.remote.app.quit();
       }
     });
-    (document.querySelector('#app') as HTMLElement).addEventListener('mouseleave', () => {
-      setTimeout(() => {
-        if (this.isPip) {
-          this.timeout = false;
-          if (this.timer) {
-            clearTimeout(this.timer);
-          }
-        }
-      }, 50);
-    });
-    window.addEventListener('mousemove', () => {
-      if (this.isPip && !this.pipBtnsKeepShow && this.isFocused) {
-        this.timeout = true;
-        if (this.timer) {
-          clearTimeout(this.timer);
-        }
-        this.timer = setTimeout(() => {
-          this.timeout = false;
-        }, 3000);
-      }
-    });
     this.$bus.$on('back-to-landingview', () => {
       this.backToLandingView = true;
       this.$bus.$off();
@@ -495,17 +405,6 @@ export default {
             this.dropFiles = args.files;
           }
           break;
-        case 'mousemove':
-          if (this.isPip) {
-            this.timeout = true;
-            if (this.timer) {
-              clearTimeout(this.timer);
-            }
-            this.timer = setTimeout(() => {
-              this.timeout = false;
-            }, 3000);
-          }
-          break;
         case 'left-drag':
           if (this.isPip) {
             if (args.windowSize) {
@@ -631,16 +530,6 @@ export default {
         this.othersAdapter();
       }
     },
-    handleMouseenter() {
-      this.pipBtnsKeepShow = true;
-      this.timeout = true;
-      if (this.timer) {
-        clearTimeout(this.timer);
-      }
-    },
-    handleMouseleave() {
-      this.pipBtnsKeepShow = false;
-    },
     currentPipBrowserView() {
       const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserViews()[0];
       return this.$electron.remote.BrowserView.getAllViews().filter(
@@ -741,13 +630,52 @@ export default {
         this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.reload();
       }
     },
+    shiftPipOperation() {
+      this.$electron.ipcRenderer.send('shift-pip');
+      this.$store.dispatch('updateBrowsingSize', this.winSize);
+      this.$store.dispatch('updateBrowsingPos', this.winPos);
+      this.pipAdapter();
+      const opacity = ['youtube', 'others'].includes(this.pipType) || (this.pipType === 'bilibili' && this.bilibiliType === 'others') ? 0.2 : 1;
+      this.$electron.ipcRenderer.send('init-danmu-state', { opacity, barrageOpen: opacity === 1 ? this.barrageOpen : false });
+    },
+    enterPipOperation() {
+      this.$electron.ipcRenderer.send('enter-pip');
+      this.$store.dispatch('updateBrowsingSize', this.winSize);
+      this.$store.dispatch('updateBrowsingPos', this.winPos);
+      this.pipAdapter();
+      const opacity = ['youtube', 'others'].includes(this.pipType) || (this.pipType === 'bilibili' && this.bilibiliType === 'others') ? 0.2 : 1;
+      this.$electron.ipcRenderer.send('init-danmu-state', { opacity, barrageOpen: opacity === 1 ? this.barrageOpen : false });
+    },
+    exitPipOperation() {
+      if (!this.browsingWindowClose) {
+        this.$electron.ipcRenderer.send('exit-pip');
+        this.$electron.ipcRenderer.send('store-pip-pos');
+        this.handleWindowChangeExitPip();
+      }
+      this.browsingWindowClose = false;
+      if (this.pipType === 'youtube') {
+        this.youtubeRecover();
+      } else if (this.pipType === 'bilibili') {
+        this.bilibiliRecover();
+      } else if (this.pipType === 'iqiyi') {
+        this.iqiyiRecover();
+      } else {
+        this.othersRecover();
+      }
+    },
     handleEnterPip() {
       if (this.hasVideo) {
-        this.updateIsPip(true);
+        if (this.isPip) {
+          this.shiftPipOperation();
+        } else {
+          this.updateIsPip(true);
+          this.enterPipOperation();
+        }
       }
     },
     handleExitPip() {
       if (this.isPip) {
+        this.exitPipOperation();
         this.updateIsPip(false);
       }
     },
diff --git a/src/renderer/main.ts b/src/renderer/main.ts
index e6ce25aba4..0df709b6e4 100644
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@@ -890,7 +890,7 @@ new Vue({
         if (this.currentRouteName === 'browsing-view') this.browsingViewTop = !this.browsingViewTop;
       });
       this.menuService.on('window.pip', () => {
-        this.$bus.$emit('toggle-pip', !this.isPip);
+        this.$bus.$emit('toggle-pip', this.$electron.remote.BrowserWindow.getFocusedWindow().id === this.$electron.remote.getCurrentWindow().id);
       });
       this.menuService.on('window.fullscreen', () => {
         if (this.isFullScreen) {

From 13cdd0439f17c48873736ae70dbb2d9aaaffcd1e Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Thu, 15 Aug 2019 17:55:20 +0800
Subject: [PATCH 007/123] feat(browsingview): support tabs to change bookmark

---
 src/main/index.js                             |  88 ++++-
 src/renderer/components/BrowsingView.vue      | 313 ++++++++----------
 .../BrowsingView/BrowsingFavicons.vue         |   9 +-
 .../BrowsingView/BrowsingHeader.vue           |  37 ++-
 src/renderer/main.ts                          |   2 +-
 static/pip/macTitlebar.html                   |  10 +
 static/pip/winTitlebar.html                   |  10 +
 7 files changed, 268 insertions(+), 201 deletions(-)
 create mode 100644 static/pip/macTitlebar.html
 create mode 100644 static/pip/winTitlebar.html

diff --git a/src/main/index.js b/src/main/index.js
index 073b7d20dc..2373ca15d5 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -9,6 +9,7 @@ import path, {
 } from 'path';
 import fs from 'fs';
 import rimraf from 'rimraf';
+import urlParse from 'url-parse-lax';
 // import { audioHandler } from './helpers/audioHandler';
 import { audioGrabService } from './helpers/AudioGrabService';
 import './helpers/electronPrototypes';
@@ -67,15 +68,19 @@ let preferenceWindow = null;
 let browsingWindow = null;
 let pipControlView = null;
 let browserViews = [];
+let currentBrowserHostname = '';
+let currentPipHostname = '';
 let tray = null;
 let pipTimer = 0;
-let initialUrl = '';
+let initialBrowserUrl = '';
+let lastBrowserUrl = '';
 let needToRestore = false;
 let forceQuit = false; // 大退app 关闭所有windows
 let needBlockCloseLaborWindow = true; // 标记是否阻塞nsfw窗口关闭
 let inited = false;
 let hideBrowsingWindow = false;
 let finalVideoToOpen = [];
+const tabGroups = [];
 const tmpVideoToOpen = [];
 const tmpSubsToOpen = [];
 const subRegex = getValidSubtitleRegex();
@@ -447,7 +452,7 @@ function registerMainWindowEvent(mainWindow) {
     const views = browsingWindow.getBrowserViews();
     browsingWindow.removeBrowserView(views[0]);
     browsingWindow.removeBrowserView(views[1]);
-    views[0].webContents.loadURL(initialUrl).then(() => {
+    views[0].webContents.loadURL(initialBrowserUrl).then(() => {
       views[0].webContents.clearHistory();
     });
   });
@@ -461,7 +466,7 @@ function registerMainWindowEvent(mainWindow) {
       });
     }
     browserViews.forEach((view) => {
-      view.webContents.loadURL(initialUrl).then(() => {
+      view.webContents.loadURL('about:blank').then(() => {
         view.webContents.clearHistory();
       });
     });
@@ -470,9 +475,53 @@ function registerMainWindowEvent(mainWindow) {
   ipcMain.on('update-pip-state', () => {
     mainWindow.send('update-pip-state');
   });
+  ipcMain.on('shift-page-tab', (evt, url) => {
+    const isPip = browsingWindow.isVisible();
+    currentPipHostname = isPip ? currentBrowserHostname : urlParse(url).hostname;
+    currentBrowserHostname = urlParse(url).hostname;
+    const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentBrowserHostname);
+    lastBrowserUrl = initialBrowserUrl;
+    initialBrowserUrl = url;
+    if (currentBrowserHostname !== 'blank' && index === -1) {
+      mainWindow.removeBrowserView(mainWindow.getBrowserView());
+      browserViews = [
+        new BrowserView({
+          webPreferences: {
+            preload: `${require('path').resolve(__static, 'pip/preload.js')}`,
+          },
+        }),
+        new BrowserView({
+          webPreferences: {
+            preload: `${require('path').resolve(__static, 'pip/preload.js')}`,
+          },
+        }),
+      ];
+      tabGroups.push({ [`${currentBrowserHostname}`]: browserViews });
+      mainWindow.addBrowserView(browserViews[0]);
+      if (!isPip) {
+        browsingWindow.removeBrowserView(browsingWindow.getBrowserViews()[0]);
+        browsingWindow.addBrowserView(browserViews[1]);
+      }
+      browserViews.forEach((view) => {
+        view.webContents.loadURL(url);
+        view.webContents.openDevTools();
+      });
+    } else {
+      browserViews = tabGroups[index][currentBrowserHostname];
+      mainWindow.removeBrowserView(mainWindow.getBrowserView());
+      mainWindow.addBrowserView(browserViews[isPip ? 1 : 0]);
+      if (!isPip) {
+        browsingWindow.removeBrowserView(browsingWindow.getBrowserViews()[0]);
+        browsingWindow.addBrowserView(browserViews[1]);
+      }
+    }
+    mainWindow.send('current-browser-id', browserViews.map(v => v.id));
+    mainWindow.send('update-browser-view', !(currentBrowserHostname !== 'blank' && index === -1));
+  });
   ipcMain.on('create-browser-view', (evt, args) => {
-    initialUrl = args.url;
-    if (!browserViews.length) {
+    currentBrowserHostname = currentPipHostname = urlParse(args.url).hostname;
+    if (currentBrowserHostname !== 'blank' && !Object.keys(tabGroups).includes(currentBrowserHostname)) {
+      initialBrowserUrl = args.url;
       browserViews = [
         new BrowserView({
           webPreferences: {
@@ -485,13 +534,15 @@ function registerMainWindowEvent(mainWindow) {
           },
         }),
       ];
+      mainWindow.send('current-browser-id', browserViews.map(v => v.id));
+      tabGroups.push({ [`${currentBrowserHostname}`]: browserViews });
+      mainWindow.addBrowserView(browserViews[0]);
+      browsingWindow.addBrowserView(browserViews[1]);
+      browserViews.forEach((view) => {
+        view.webContents.loadURL(args.url);
+        view.webContents.openDevTools();
+      });
     }
-    mainWindow.addBrowserView(browserViews[0]);
-    browsingWindow.addBrowserView(browserViews[1]);
-    browserViews.forEach((view) => {
-      view.webContents.loadURL(args.url);
-      view.webContents.openDevTools();
-    });
   });
   ipcMain.on('update-danmu-state', (evt, val) => {
     pipControlView.webContents.executeJavaScript(`document.querySelector(".danmu").src = ${val} ? "../../src/renderer/assets/icon/danmu-default-icon.svg" : "../../src/renderer/assets/icon/noDanmu-default-icon.svg"`);
@@ -535,16 +586,19 @@ function registerMainWindowEvent(mainWindow) {
     }
   });
   ipcMain.on('shift-pip', () => {
+    const isDifferentBrowser = currentPipHostname !== '' && currentBrowserHostname !== currentPipHostname;
     const mainView = mainWindow.getBrowserView();
     mainWindow.removeBrowserView(mainView);
-    browsingWindow.getBrowserViews().forEach((view) => {
-      browsingWindow.removeBrowserView(view);
-      view.webContents.loadURL(initialUrl);
-    });
+    const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentBrowserHostname);
+    const browserView = browsingWindow.getBrowserViews()[0];
+    browsingWindow.removeBrowserView(browserView);
+    browsingWindow.removeBrowserView(pipControlView);
+    browserView.webContents.loadURL(isDifferentBrowser ? lastBrowserUrl : initialBrowserUrl);
     createPipControlView();
     browsingWindow.addBrowserView(mainView);
     browsingWindow.addBrowserView(pipControlView);
-    mainWindow.addBrowserView(browserViews.find(view => view.id !== mainView.id));
+    mainWindow.addBrowserView(isDifferentBrowser ? tabGroups[index][currentBrowserHostname]
+      .find(tab => tab.id !== mainView.id) : browserView);
     pipControlView.webContents.openDevTools();
     pipControlView.webContents.loadURL(`file:${require('path').resolve(__static, 'pip/pipControl.html')}`);
     pipControlView.setBackgroundColor('#00FFFFFF');
@@ -572,7 +626,7 @@ function registerMainWindowEvent(mainWindow) {
       browsingWindow.addBrowserView(pipControlView);
       browsingWindow.show();
     }
-    pipControlView.webContents.openDevTools();
+    pipControlView.webContents.openDevTools({ mode: 'detach' });
     pipControlView.webContents.loadURL(`file:${require('path').resolve(__static, 'pip/pipControl.html')}`);
     pipControlView.setBackgroundColor('#00FFFFFF');
     browsingWindow.blur();
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 5e09ad9c47..25cac685c5 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -12,6 +12,7 @@
       :handle-url-reload="handleUrlReload"
       :handle-url-back="handleUrlBack"
       :handle-url-forward="handleUrlForward"
+      :handle-bookmark-open="handleBookmarkOpen"
       :style="{ webkitAppRegion: 'drag' }"
       v-show="headerToShow"
     />
@@ -69,7 +70,6 @@ export default {
       maskToShow: false,
       dropFiles: [],
       hasVideo: false,
-      currentUrl: '',
       calculateVideoNum: 'var iframe = document.querySelector("iframe");if (iframe && iframe.contentDocument) {document.getElementsByTagName("video").length + iframe.contentDocument.getElementsByTagName("video").length} else {document.getElementsByTagName("video").length}',
       getVideoStyle: 'getComputedStyle(document.querySelector("video") || document.querySelector("iframe").contentDocument.querySelector("video"))',
       pipBtnsKeepShow: false,
@@ -80,6 +80,7 @@ export default {
       oldDisplayId: -1,
       backToLandingView: false,
       browsingWindowClose: false,
+      browserIds: [1, 2],
     };
   },
   computed: {
@@ -127,98 +128,7 @@ export default {
       }
     },
     isPip() {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any,complexity
-      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('ipc-message', (evt: Event, channel: string, args: any) => { // https://github.com/electron/typescript-definitions/issues/27 fixed in 6.0.0
-        switch (channel) {
-          case 'open-url':
-            this.handleOpenUrl(args);
-            break;
-          case 'dragover':
-          case 'dragleave':
-            this.maskToShow = args.dragover;
-            break;
-          case 'drop':
-            this.maskToShow = false;
-            if ((args.files as string[]).length) {
-              this.$electron.remote.getCurrentWindow().getBrowserViews()[0].setBounds({
-                x: 0, y: 36, width: 0, height: 0,
-              });
-              this.dropFiles = args.files;
-            }
-            break;
-          case 'left-drag':
-            if (this.isPip) {
-              if (args.windowSize) {
-                this.$electron.ipcRenderer.send('callBrowsingWindowMethod', 'setBounds', [{
-                  x: args.x,
-                  y: args.y,
-                  width: args.windowSize[0],
-                  height: args.windowSize[1],
-                }]);
-              } else {
-                this.$electron.ipcRenderer.send('callBrowsingWindowMethod', 'setPosition', [args.x, args.y]);
-              }
-            }
-            break;
-          case 'fullscreenchange':
-            if (!this.isPip) {
-              this.headerToShow = !args.isFullScreen;
-            }
-            break;
-          case 'keydown':
-            if (['INPUT', 'TEXTAREA'].includes(args.targetName as string)) {
-              this.acceleratorAvailable = false;
-            }
-            break;
-          default:
-            console.warn(`Unhandled ipc-message: ${channel}`, args);
-            break;
-        }
-      });
-      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('dom-ready', () => { // for webview test
-        window.focus();
-        this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.focus();
-        if (process.env.NODE_ENV === 'development') this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.openDevTools();
-      });
-      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('new-window', (e: Event, url: string, disposition: string) => {
-        if (disposition !== 'new-window') {
-          this.handleOpenUrl({ url });
-        }
-      });
-      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('did-start-navigation', (e: Event, url: string) => {
-        if (!url || url === 'about:blank') return;
-        this.startTime = new Date().getTime();
-        this.loadingState = true;
-        const loadUrl = this.$electron.remote.getCurrentWindow()
-          .getBrowserViews()[0].webContents.getURL();
-        this.currentUrl = loadUrl;
-        const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
-        if (recordIndex !== -1) {
-          switch (recordIndex) {
-            case 0:
-              this.updateRecordUrl({ youtube: loadUrl });
-              break;
-            case 1:
-              this.updateRecordUrl({ bilibili: loadUrl });
-              break;
-            case 2:
-              this.updateRecordUrl({ iqiyi: loadUrl });
-              break;
-            default:
-              break;
-          }
-        }
-      });
-      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('did-stop-loading', () => {
-        const loadingTime: number = new Date().getTime() - this.startTime;
-        if (loadingTime % 3000 === 0) {
-          this.loadingState = false;
-        } else {
-          setTimeout(() => {
-            this.loadingState = false;
-          }, 3000 - (loadingTime % 3000));
-        }
-      });
+      this.addListenerToBrowser();
     },
     pipSize() {
       if (this.isPip && this.pipType !== 'youtube') {
@@ -290,20 +200,17 @@ export default {
     );
     this.$store.dispatch('updateBrowsingPos', this.winPos);
     this.$electron.ipcRenderer.send('callMainWindowMethod', 'setAspectRatio', [0]);
-    this.$electron.remote.getCurrentWindow().getBrowserViews()[0].setBounds({
-      x: 0, y: 36, width: this.browsingSize[0], height: this.browsingSize[1] - 36,
-    });
-    this.$electron.remote.getCurrentWindow()
-      .getBrowserViews()[0].setAutoResize({ width: true, height: true });
+    this.initialBrowserViewRect();
   },
   mounted() {
     this.$bus.$on('toggle-reload', this.handleUrlReload);
     this.$bus.$on('toggle-back', this.handleUrlBack);
     this.$bus.$on('toggle-forward', this.handleUrlForward);
-    this.$bus.$on('toggle-pip', (state: boolean) => {
+    this.$bus.$on('toggle-pip', () => {
+      const focusedOnMainWindow = this.$electron.remote.getCurrentWindow().isFocused();
       setTimeout(() => {
         if (this.acceleratorAvailable) {
-          if (!state) {
+          if (!focusedOnMainWindow) {
             this.updateIsPip(false);
             this.exitPipOperation();
           } else if (this.hasVideo) {
@@ -335,6 +242,7 @@ export default {
     });
     window.addEventListener('beforeunload', (e: BeforeUnloadEvent) => {
       this.$electron.ipcRenderer.send('remove-browser');
+      this.removeListener();
       if (!this.asyncTasksDone) {
         e.returnValue = false;
         if (this.isPip) {
@@ -364,6 +272,31 @@ export default {
         name: 'landing-view',
       });
     });
+    this.$electron.ipcRenderer.on('current-browser-id', (e: Event, ids: number[]) => {
+      this.browserIds = ids;
+    });
+    this.$electron.ipcRenderer.on('update-browser-view', (e: Event, isShift: boolean) => {
+      this.initialBrowserViewRect();
+      this.addListenerToBrowser();
+      if (isShift) {
+        const loadUrl = this.$electron.remote.getCurrentWindow()
+          .getBrowserViews()[0].webContents.getURL();
+        const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
+        this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
+          .executeJavaScript(this.calculateVideoNum, (r: number) => {
+            this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
+            this.$electron.ipcRenderer.send('update-enabled', 'window.pip', this.hasVideo);
+            this.$refs.browsingHeader.updateWebInfo({
+              hasVideo: this.hasVideo,
+              url: loadUrl,
+              canGoBack: this.$electron.remote.getCurrentWindow()
+                .getBrowserViews()[0].webContents.canGoBack(),
+              canGoForward: this.$electron.remote.getCurrentWindow()
+                .getBrowserViews()[0].webContents.canGoForward(),
+            });
+          });
+      }
+    });
     this.$electron.ipcRenderer.on('handle-exit-pip', () => {
       this.handleExitPip();
     });
@@ -386,8 +319,105 @@ export default {
       this.browsingWindowClose = true;
       this.updateIsPip(false);
     });
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any,complexity
-    this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('ipc-message', (evt: Event, channel: string, args: any) => { // https://github.com/electron/typescript-definitions/issues/27 fixed in 6.0.0
+    this.addListenerToBrowser();
+  },
+  beforeDestroy() {
+    this.$electron.ipcRenderer.send('remove-browser');
+    asyncStorage.set('browsing', {
+      pipSize: this.pipSize,
+      pipPos: this.pipPos,
+      browsingSize: this.browsingSize,
+      browsingPos: this.browsingPos,
+      barrageOpen: this.barrageOpen,
+    }).then(() => {
+      if (this.isPip) {
+        this.$electron.ipcRenderer.send('store-pip-pos');
+      } else {
+        this.$store.dispatch('updateBrowsingSize', this.winSize);
+        this.$store.dispatch('updateBrowsingPos', this.winPos);
+      }
+      this.updateIsPip(false);
+    }).finally(() => {
+      if (this.backToLandingView) {
+        windowRectService.uploadWindowBy(false, 'landing-view');
+      }
+    });
+  },
+  methods: {
+    ...mapActions({
+      updateRecordUrl: browsingActions.UPDATE_RECORD_URL,
+      updateBarrageOpen: browsingActions.UPDATE_BARRAGE_OPEN,
+      updateIsPip: browsingActions.UPDATE_IS_PIP,
+    }),
+    handleBookmarkOpen(url: string) {
+      this.removeListener();
+      this.hasVideo = false;
+      this.$electron.ipcRenderer.send('update-enabled', 'window.pip', false);
+      this.$refs.browsingHeader.updateWebInfo({
+        hasVideo: this.hasVideo,
+      });
+      this.$electron.ipcRenderer.send('shift-page-tab', url);
+    },
+    addListenerToBrowser() {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('ipc-message', (evt: Event, channel: string, args: any) => {
+        this.ipcMessage(channel, args);
+      });
+      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('dom-ready', this.domReady);
+      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('new-window', (e: Event, url: string, disposition: string) => {
+        this.newWindow(url, disposition);
+      });
+      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('did-start-navigation', (e: Event, url: string) => {
+        this.didStartNavigation(url);
+      });
+      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('did-stop-loading', this.didStopLoading);
+    },
+    removeListener() {
+      const currentWebContents = this.$electron.remote.getCurrentWindow()
+        .getBrowserViews()[0].webContents;
+      currentWebContents.removeListener('did-stop-loading', this.didStopLoading);
+      currentWebContents.removeListener('dom-ready', this.domReady);
+      currentWebContents.removeListener('ipc-message', this.ipcMessage);
+      currentWebContents.removeListener('did-start-navigation', this.didStartNavigation);
+      currentWebContents.removeListener('new-window', this.newWindow);
+    },
+    newWindow(url: string, disposition: string) {
+      if (disposition !== 'new-window') {
+        this.handleOpenUrl({ url });
+      }
+    },
+    initialBrowserViewRect() {
+      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].setBounds({
+        x: 0, y: 36, width: this.browsingSize[0], height: this.browsingSize[1] - 36,
+      });
+      this.$electron.remote.getCurrentWindow()
+        .getBrowserViews()[0].setAutoResize({ width: true, height: true });
+    },
+    didStartNavigation(url: string) {
+      if (!url || url === 'about:blank') return;
+      this.startTime = new Date().getTime();
+      this.loadingState = true;
+      const loadUrl = this.$electron.remote.getCurrentWindow()
+        .getBrowserViews()[0].webContents.getURL();
+      const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
+      if (recordIndex !== -1) {
+        switch (recordIndex) {
+          case 0:
+            this.updateRecordUrl({ youtube: loadUrl });
+            break;
+          case 1:
+            this.updateRecordUrl({ bilibili: loadUrl });
+            break;
+          case 2:
+            this.updateRecordUrl({ iqiyi: loadUrl });
+            break;
+          default:
+            break;
+        }
+      }
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ipcMessage(channel: string, args: any) {
       switch (channel) {
         case 'open-url':
           this.handleOpenUrl(args);
@@ -433,42 +463,13 @@ export default {
           console.warn(`Unhandled ipc-message: ${channel}`, args);
           break;
       }
-    });
-    this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('dom-ready', () => { // for webview test
+    },
+    domReady() {
       window.focus();
       this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.focus();
       if (process.env.NODE_ENV === 'development') this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.openDevTools();
-    });
-    this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('new-window', (e: Event, url: string, disposition: string) => {
-      if (disposition !== 'new-window') {
-        this.handleOpenUrl({ url });
-      }
-    });
-    this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('did-start-navigation', (e: Event, url: string) => {
-      if (!url || url === 'about:blank') return;
-      this.startTime = new Date().getTime();
-      this.loadingState = true;
-      const loadUrl = this.$electron.remote.getCurrentWindow()
-        .getBrowserViews()[0].webContents.getURL();
-      this.currentUrl = loadUrl;
-      const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
-      if (recordIndex !== -1) {
-        switch (recordIndex) {
-          case 0:
-            this.updateRecordUrl({ youtube: loadUrl });
-            break;
-          case 1:
-            this.updateRecordUrl({ bilibili: loadUrl });
-            break;
-          case 2:
-            this.updateRecordUrl({ iqiyi: loadUrl });
-            break;
-          default:
-            break;
-        }
-      }
-    });
-    this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('did-stop-loading', () => {
+    },
+    didStopLoading() {
       const loadingTime: number = new Date().getTime() - this.startTime;
       if (loadingTime % 3000 === 0) {
         this.loadingState = false;
@@ -477,45 +478,14 @@ export default {
           this.loadingState = false;
         }, 3000 - (loadingTime % 3000));
       }
-    });
-  },
-  beforeDestroy() {
-    this.$electron.ipcRenderer.send('remove-browser');
-    asyncStorage.set('browsing', {
-      pipSize: this.pipSize,
-      pipPos: this.pipPos,
-      browsingSize: this.browsingSize,
-      browsingPos: this.browsingPos,
-      barrageOpen: this.barrageOpen,
-    }).then(() => {
-      if (this.isPip) {
-        this.$electron.ipcRenderer.send('store-pip-pos');
-      } else {
-        this.$store.dispatch('updateBrowsingSize', this.winSize);
-        this.$store.dispatch('updateBrowsingPos', this.winPos);
-      }
-      this.updateIsPip(false);
-    }).finally(() => {
-      if (this.backToLandingView) {
-        windowRectService.uploadWindowBy(false, 'landing-view');
-      }
-    });
-  },
-  methods: {
-    ...mapActions({
-      updateRecordUrl: browsingActions.UPDATE_RECORD_URL,
-      updateBarrageOpen: browsingActions.UPDATE_BARRAGE_OPEN,
-      updateIsPip: browsingActions.UPDATE_IS_PIP,
-    }),
+    },
     handleOpenUrl({ url }: { url: string }) {
       if (!url || url === 'about:blank') return;
-      if (this.isPip) {
-        this.updateIsPip(false);
-      }
       this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.loadURL(urlParseLax(url).protocol ? url : `https:${url}`);
     },
     pipAdapter() {
-      const parseUrl = urlParseLax(this.currentUrl);
+      const parseUrl = urlParseLax(this.$electron.remote.getCurrentWindow()
+        .getBrowserViews()[0].webContents.getURL());
       if (parseUrl.host.includes('youtube')) {
         this.pipType = 'youtube';
         this.youtubeAdapter();
@@ -532,9 +502,8 @@ export default {
     },
     currentPipBrowserView() {
       const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserViews()[0];
-      return this.$electron.remote.BrowserView.getAllViews().filter(
-        (view: Electron.BrowserView) => view.id !== currentBrowserView.id && view.id <= 2,
-      )[0];
+      return this.$electron.remote.BrowserView
+        .fromId(this.browserIds.find((id: number) => id !== currentBrowserView.id));
     },
     handleWindowChangeEnterPip() {
       const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserViews()[0];
diff --git a/src/renderer/components/BrowsingView/BrowsingFavicons.vue b/src/renderer/components/BrowsingView/BrowsingFavicons.vue
index 11df63fbff..f7ab88f7d2 100644
--- a/src/renderer/components/BrowsingView/BrowsingFavicons.vue
+++ b/src/renderer/components/BrowsingView/BrowsingFavicons.vue
@@ -52,6 +52,10 @@ export default {
       type: Object,
       required: true,
     },
+    handleBookmarkOpen: {
+      type: Function,
+      required: true,
+    },
   },
   data() {
     return {
@@ -92,10 +96,7 @@ export default {
       this.faviconIndex = -1;
     },
     handleFavOpen(item: { name: string, type: string, url: string }) {
-      this.$electron.remote.BrowserView.getAllViews()[0].webContents
-        .loadURL(this.recordUrl[item.type] ? this.recordUrl[item.type] : item.url);
-      this.$electron.remote.BrowserView.getAllViews()[1].webContents
-        .loadURL(this.recordUrl[item.type] ? this.recordUrl[item.type] : item.url);
+      this.handleBookmarkOpen(this.recordUrl[item.type] ? this.recordUrl[item.type] : item.url);
     },
     handleFavAnimEnd(e: AnimationEvent) {
       const target = e.target as HTMLElement;
diff --git a/src/renderer/components/BrowsingView/BrowsingHeader.vue b/src/renderer/components/BrowsingView/BrowsingHeader.vue
index bd8526cf6f..fdd396387e 100644
--- a/src/renderer/components/BrowsingView/BrowsingHeader.vue
+++ b/src/renderer/components/BrowsingView/BrowsingHeader.vue
@@ -16,6 +16,7 @@
     />
     <browsing-favicons
       :record-url="recordUrl"
+      :handle-bookmark-open="handleBookmarkOpen"
       :style="{
         order: isDarwin ? 2 : 3,
       }"
@@ -32,7 +33,7 @@
         zIndex: '6',
         order: isDarwin ? 3 : 1,
         webkitAppRegion: 'no-drag',
-        cursor: webInfo.hasVideo ? 'pointer' : '',
+        cursor: hasVideo ? 'pointer' : '',
       }"
     >
       <Icon
@@ -79,23 +80,44 @@ export default {
       type: Function,
       required: true,
     },
+    handleBookmarkOpen: {
+      type: Function,
+      required: true,
+    },
   },
   data() {
     return {
       showOpenUrl: false,
-      webInfo: {},
       backType: 'backDisabled',
       forwardType: 'forwardDisabled',
+      hasVideo: false,
+      url: '',
+      canGoBack: false,
+      canGoForward: false,
     };
   },
   computed: {
     ...mapGetters(['recordUrl', 'isMaximized']),
     picInPicType() {
-      return this.webInfo.hasVideo ? 'pip' : 'pipDisabled';
+      return this.hasVideo ? 'pip' : 'pipDisabled';
     },
     isDarwin() {
       return process.platform === 'darwin';
     },
+    webInfo() {
+      return {
+        canGoBack: this.canGoBack,
+        canGoForward: this.canGoForward,
+      };
+    },
+  },
+  watch: {
+    canGoBack(val: boolean) {
+      this.backType = val ? 'back' : 'backDisabled';
+    },
+    canGoForward(val: boolean) {
+      this.forwardType = val ? 'forward' : 'forwardDisabled';
+    },
   },
   methods: {
     handleDbClick() {
@@ -117,11 +139,12 @@ export default {
       }
     },
     updateWebInfo(info: {
-      hasVideo: boolean, url: string, canGoBack: boolean, canGoForward: boolean
+      hasVideo?: boolean, url?: string, canGoBack?: boolean, canGoForward?: boolean
     }) {
-      this.webInfo = info;
-      this.backType = info.canGoBack ? 'back' : 'backDisabled';
-      this.forwardType = info.canGoForward ? 'forward' : 'forwardDisabled';
+      const keys = Object.keys(info);
+      keys.forEach((key: string) => {
+        this[key] = info[key];
+      });
     },
   },
 };
diff --git a/src/renderer/main.ts b/src/renderer/main.ts
index 4349ca3ae5..8efe30becf 100644
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@@ -907,7 +907,7 @@ new Vue({
         if (this.currentRouteName === 'browsing-view') this.browsingViewTop = !this.browsingViewTop;
       });
       this.menuService.on('window.pip', () => {
-        this.$bus.$emit('toggle-pip', this.$electron.remote.BrowserWindow.getFocusedWindow().id === this.$electron.remote.getCurrentWindow().id);
+        this.$bus.$emit('toggle-pip');
       });
       this.menuService.on('window.fullscreen', () => {
         if (this.isFullScreen) {
diff --git a/static/pip/macTitlebar.html b/static/pip/macTitlebar.html
new file mode 100644
index 0000000000..81d41bd8d6
--- /dev/null
+++ b/static/pip/macTitlebar.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>pipTitlebar</title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/static/pip/winTitlebar.html b/static/pip/winTitlebar.html
new file mode 100644
index 0000000000..6b6499c3e0
--- /dev/null
+++ b/static/pip/winTitlebar.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>$Title$</title>
+</head>
+<body>
+$END$
+</body>
+</html>

From c2095dedef0c5b573c153fdc426fd7256ae2d8d5 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Fri, 16 Aug 2019 15:14:12 +0800
Subject: [PATCH 008/123] feat(browsingview): add titlebar to pip window

---
 src/main/index.js                             | 80 +++++++++++++--
 src/renderer/components/BrowsingPip.vue       | 14 +++
 .../pip/assets}/danmu-default-icon.svg        |  0
 .../pip/assets}/noDanmu-default-icon.svg      |  0
 .../pip/assets}/pipBack-default-icon.svg      |  0
 .../pip/assets/titleBarClose-active-icon.svg  |  8 ++
 .../pip/assets/titleBarClose-default-icon.svg |  7 ++
 .../pip/assets/titleBarClose-hover-icon.svg   |  8 ++
 .../assets/titleBarExitFull-active-icon.svg   |  8 ++
 .../assets/titleBarExitFull-default-icon.svg  |  7 ++
 .../assets/titleBarExitFull-hover-icon.svg    |  8 ++
 .../pip/assets/titleBarFull-active-icon.svg   |  8 ++
 .../pip/assets/titleBarFull-default-icon.svg  |  7 ++
 static/pip/assets/titleBarFull-hover-icon.svg |  8 ++
 .../assets/titleBarRecover-active-icon.svg    |  8 ++
 .../assets/titleBarRecover-default-icon.svg   |  7 ++
 .../pip/assets/titleBarRecover-hover-icon.svg |  8 ++
 static/pip/macTitlebar.html                   | 97 ++++++++++++++++++-
 static/pip/pipControl.html                    | 11 ++-
 static/pip/titlebarPreload.js                 | 23 +++++
 static/pip/winTitlebar.html                   |  4 +-
 21 files changed, 305 insertions(+), 16 deletions(-)
 rename {src/renderer/assets/icon => static/pip/assets}/danmu-default-icon.svg (100%)
 rename {src/renderer/assets/icon => static/pip/assets}/noDanmu-default-icon.svg (100%)
 rename {src/renderer/assets/icon => static/pip/assets}/pipBack-default-icon.svg (100%)
 create mode 100644 static/pip/assets/titleBarClose-active-icon.svg
 create mode 100644 static/pip/assets/titleBarClose-default-icon.svg
 create mode 100644 static/pip/assets/titleBarClose-hover-icon.svg
 create mode 100644 static/pip/assets/titleBarExitFull-active-icon.svg
 create mode 100644 static/pip/assets/titleBarExitFull-default-icon.svg
 create mode 100644 static/pip/assets/titleBarExitFull-hover-icon.svg
 create mode 100644 static/pip/assets/titleBarFull-active-icon.svg
 create mode 100644 static/pip/assets/titleBarFull-default-icon.svg
 create mode 100644 static/pip/assets/titleBarFull-hover-icon.svg
 create mode 100644 static/pip/assets/titleBarRecover-active-icon.svg
 create mode 100644 static/pip/assets/titleBarRecover-default-icon.svg
 create mode 100644 static/pip/assets/titleBarRecover-hover-icon.svg
 create mode 100644 static/pip/titlebarPreload.js

diff --git a/src/main/index.js b/src/main/index.js
index 2373ca15d5..af66ff96de 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -5,7 +5,7 @@ import { app, BrowserWindow, session, Tray, ipcMain, globalShortcut, nativeImage
 import { throttle, debounce, uniq } from 'lodash';
 import os from 'os';
 import path, {
-  basename, dirname, extname, join,
+  basename, dirname, extname, join, resolve,
 } from 'path';
 import fs from 'fs';
 import rimraf from 'rimraf';
@@ -67,6 +67,7 @@ let aboutWindow = null;
 let preferenceWindow = null;
 let browsingWindow = null;
 let pipControlView = null;
+let titlebarView = null;
 let browserViews = [];
 let currentBrowserHostname = '';
 let currentPipHostname = '';
@@ -84,6 +85,7 @@ const tabGroups = [];
 const tmpVideoToOpen = [];
 const tmpSubsToOpen = [];
 const subRegex = getValidSubtitleRegex();
+const titlebarUrl = process.platform === 'darwin' ? `file:${resolve(__static, 'pip/macTitlebar.html')}` : `file:${resolve(__static, 'pip/winTitlebar.html')}`;
 const mainURL = process.env.NODE_ENV === 'development'
   ? 'http://localhost:9080'
   : `file://${__dirname}/index.html`;
@@ -143,6 +145,15 @@ function createPipControlView() {
   });
 }
 
+function createTitlebarView() {
+  if (titlebarView) titlebarView.destroy();
+  titlebarView = new BrowserView({
+    webPreferences: {
+      preload: `${require('path').resolve(__static, 'pip/titlebarPreload.js')}`,
+    },
+  });
+}
+
 function markNeedToRestore() {
   fs.closeSync(fs.openSync(path.join(app.getPath('userData'), 'NEED_TO_RESTORE_MARK'), 'w'));
 }
@@ -504,7 +515,6 @@ function registerMainWindowEvent(mainWindow) {
       }
       browserViews.forEach((view) => {
         view.webContents.loadURL(url);
-        view.webContents.openDevTools();
       });
     } else {
       browserViews = tabGroups[index][currentBrowserHostname];
@@ -540,17 +550,16 @@ function registerMainWindowEvent(mainWindow) {
       browsingWindow.addBrowserView(browserViews[1]);
       browserViews.forEach((view) => {
         view.webContents.loadURL(args.url);
-        view.webContents.openDevTools();
       });
     }
   });
   ipcMain.on('update-danmu-state', (evt, val) => {
-    pipControlView.webContents.executeJavaScript(`document.querySelector(".danmu").src = ${val} ? "../../src/renderer/assets/icon/danmu-default-icon.svg" : "../../src/renderer/assets/icon/noDanmu-default-icon.svg"`);
+    pipControlView.webContents.executeJavaScript(`document.querySelector(".danmu").src = ${val} ? "assets/danmu-default-icon.svg" : "assets/noDanmu-default-icon.svg"`);
   });
   ipcMain.on('init-danmu-state', (evt, args) => {
     pipControlView.webContents.executeJavaScript(
       `const danmu = document.querySelector(".danmu");
-      danmu.src = ${args.barrageOpen} ? "../../src/renderer/assets/icon/danmu-default-icon.svg" : "../../src/renderer/assets/icon/noDanmu-default-icon.svg";
+      danmu.src = ${args.barrageOpen} ? "assets/danmu-default-icon.svg" : "assets/noDanmu-default-icon.svg";
       danmu.style.opacity = ${args.opacity};
       danmu.style.cursor = ${args.opacity} === 1 ? "cursor" : "default"`,
     );
@@ -585,6 +594,44 @@ function registerMainWindowEvent(mainWindow) {
       pipControlView.webContents.executeJavaScript('document.querySelector(".pip-buttons").style.display = "none";');
     }
   });
+  ipcMain.on('maximizable', (evt, val) => {
+    console.log(val);
+    if (val) {
+      titlebarView.webContents.executeJavaScript('document.querySelector(".titlebarMax").style.display = mouseenter ? "block" : "none";'
+        + 'document.querySelector(".titlebarFull").style.display = mouseenter ? "none" : "block";');
+    } else {
+      titlebarView.webContents.executeJavaScript('document.querySelector(".titlebarMax").style.display = "none";'
+        + 'document.querySelector(".titlebarFull").style.display = "block";');
+    }
+  });
+  ipcMain.on('mouseup', (evt, type) => {
+    switch (type) {
+      case 'close':
+        browsingWindow.close();
+        break;
+      case 'min':
+        browsingWindow.minimize();
+        break;
+      case 'full':
+        browsingWindow.setFullScreen(true);
+        titlebarView.webContents.executeJavaScript('document.querySelector(".titlebarFull").src = "assets/titleBarRecover-default-icon.svg";'
+          + 'document.querySelector(".titlebarMin").style.pointerEvents = "none";'
+          + 'document.querySelector(".titlebarMin").style.opacity = "0.25";'
+          + 'document.querySelector(".titlebarFull").style.display = "none";'
+          + 'document.querySelector(".titlebarRecover").style.display = "block";');
+        break;
+      case 'recover':
+        browsingWindow.setFullScreen(false);
+        titlebarView.webContents.executeJavaScript('document.querySelector(".titlebarFull").src = "assets/titleBarFull-default-icon.svg";'
+          + 'document.querySelector(".titlebarMin").style.pointerEvents = "";'
+          + 'document.querySelector(".titlebarMin").style.opacity = "1";'
+          + 'document.querySelector(".titlebarFull").style.display = "";'
+          + 'document.querySelector(".titlebarRecover").style.display = "none";');
+        break;
+      default:
+        break;
+    }
+  });
   ipcMain.on('shift-pip', () => {
     const isDifferentBrowser = currentPipHostname !== '' && currentBrowserHostname !== currentPipHostname;
     const mainView = mainWindow.getBrowserView();
@@ -593,21 +640,30 @@ function registerMainWindowEvent(mainWindow) {
     const browserView = browsingWindow.getBrowserViews()[0];
     browsingWindow.removeBrowserView(browserView);
     browsingWindow.removeBrowserView(pipControlView);
+    browsingWindow.removeBrowserView(titlebarView);
     browserView.webContents.loadURL(isDifferentBrowser ? lastBrowserUrl : initialBrowserUrl);
     createPipControlView();
+    createTitlebarView();
     browsingWindow.addBrowserView(mainView);
     browsingWindow.addBrowserView(pipControlView);
+    browsingWindow.addBrowserView(titlebarView);
     mainWindow.addBrowserView(isDifferentBrowser ? tabGroups[index][currentBrowserHostname]
       .find(tab => tab.id !== mainView.id) : browserView);
-    pipControlView.webContents.openDevTools();
     pipControlView.webContents.loadURL(`file:${require('path').resolve(__static, 'pip/pipControl.html')}`);
     pipControlView.setBackgroundColor('#00FFFFFF');
+    titlebarView.webContents.loadURL(titlebarUrl);
+    titlebarView.setBackgroundColor('#00FFFFFF');
+    titlebarView.setBounds({
+      x: 0, y: 0, width: browsingWindow.getSize()[0], height: 36,
+    });
     browsingWindow.blur();
     browsingWindow.focus();
   });
   ipcMain.on('enter-pip', () => {
     const mainView = mainWindow.getBrowserView();
     createPipControlView();
+    createTitlebarView();
+    titlebarView.webContents.openDevTools({ mode: 'detach' });
     if (!browsingWindow) {
       createBrowsingWindow();
       browsingWindow.openDevTools();
@@ -616,6 +672,7 @@ function registerMainWindowEvent(mainWindow) {
       mainWindow.addBrowserView(browView);
       browsingWindow.addBrowserView(mainView);
       browsingWindow.addBrowserView(pipControlView);
+      browsingWindow.addBrowserView(titlebarView);
       browsingWindow.show();
     } else {
       const browView = browsingWindow.getBrowserView();
@@ -624,17 +681,25 @@ function registerMainWindowEvent(mainWindow) {
       mainWindow.addBrowserView(browView);
       browsingWindow.addBrowserView(mainView);
       browsingWindow.addBrowserView(pipControlView);
+      browsingWindow.addBrowserView(titlebarView);
       browsingWindow.show();
     }
-    pipControlView.webContents.openDevTools({ mode: 'detach' });
     pipControlView.webContents.loadURL(`file:${require('path').resolve(__static, 'pip/pipControl.html')}`);
     pipControlView.setBackgroundColor('#00FFFFFF');
+    titlebarView.webContents.loadURL(titlebarUrl);
+    titlebarView.setBackgroundColor('#00FFFFFF');
+    titlebarView.setBounds({
+      x: 0, y: 0, width: browsingWindow.getSize()[0], height: 36,
+    });
     browsingWindow.blur();
     browsingWindow.focus();
   });
   ipcMain.on('set-control-bounds', (evt, args) => {
     if (pipControlView) pipControlView.setBounds(args);
   });
+  ipcMain.on('set-titlebar-bounds', (evt, args) => {
+    if (titlebarView) titlebarView.setBounds(args);
+  });
   ipcMain.on('exit-pip', () => {
     const mainView = mainWindow.getBrowserView();
     const browViews = browsingWindow.getBrowserViews();
@@ -642,6 +707,7 @@ function registerMainWindowEvent(mainWindow) {
     if (browsingWindow) {
       browsingWindow.removeBrowserView(browViews[0]);
       browsingWindow.removeBrowserView(pipControlView);
+      browsingWindow.removeBrowserView(titlebarView);
     }
     if (mainView.webContents.canGoBack()) {
       mainView.webContents.goBack();
diff --git a/src/renderer/components/BrowsingPip.vue b/src/renderer/components/BrowsingPip.vue
index 4966ea7737..b4200f3cb4 100644
--- a/src/renderer/components/BrowsingPip.vue
+++ b/src/renderer/components/BrowsingPip.vue
@@ -14,6 +14,14 @@ export default {
     };
   },
   mounted() {
+    window.addEventListener('keydown', (e) => {
+      if (e.keyCode === 18) {
+        electron.ipcRenderer.send('maximizable', true);
+      }
+    });
+    window.addEventListener('keyup', () => {
+      electron.ipcRenderer.send('maximizable', false);
+    });
     window.addEventListener('focus', () => {
       electron.ipcRenderer.send('update-focused-window', false);
       electron.ipcRenderer.send('update-enabled', 'window.pip', true);
@@ -22,6 +30,12 @@ export default {
     window.addEventListener('resize', throttle(() => {
       const size = electron.remote.getCurrentWindow().getSize();
       electron.ipcRenderer.send('pip-window-size', size);
+      electron.ipcRenderer.send('set-titlebar-bounds', {
+        x: 0,
+        y: 0,
+        width: size[0],
+        height: 36,
+      });
       electron.ipcRenderer.send('set-control-bounds', {
         x: Math.round(size[0] - 65),
         y: Math.round(size[1] / 2 - 54),
diff --git a/src/renderer/assets/icon/danmu-default-icon.svg b/static/pip/assets/danmu-default-icon.svg
similarity index 100%
rename from src/renderer/assets/icon/danmu-default-icon.svg
rename to static/pip/assets/danmu-default-icon.svg
diff --git a/src/renderer/assets/icon/noDanmu-default-icon.svg b/static/pip/assets/noDanmu-default-icon.svg
similarity index 100%
rename from src/renderer/assets/icon/noDanmu-default-icon.svg
rename to static/pip/assets/noDanmu-default-icon.svg
diff --git a/src/renderer/assets/icon/pipBack-default-icon.svg b/static/pip/assets/pipBack-default-icon.svg
similarity index 100%
rename from src/renderer/assets/icon/pipBack-default-icon.svg
rename to static/pip/assets/pipBack-default-icon.svg
diff --git a/static/pip/assets/titleBarClose-active-icon.svg b/static/pip/assets/titleBarClose-active-icon.svg
new file mode 100644
index 0000000000..5bef90a069
--- /dev/null
+++ b/static/pip/assets/titleBarClose-active-icon.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="macos-close-mousedown-2x" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="Path" stroke="#808086" fill="#848484" cx="12" cy="12" r="11.5"></circle>
+        <path d="M14.4041631,12 L17.6342269,15.2300637 C18.1153528,15.7111897 18.1153528,16.4912489 17.6342269,16.9723749 L16.9723749,17.6342269 C16.4912489,18.1153528 15.7111897,18.1153528 15.2300637,17.6342269 L12,14.4041631 L8.76993626,17.6342269 C8.28881033,18.1153528 7.50875108,18.1153528 7.02762515,17.6342269 L6.36577313,16.9723749 C5.88464721,16.4912489 5.88464721,15.7111897 6.36577313,15.2300637 L9.59583688,12 L6.36577313,8.76993626 C5.88464721,8.28881033 5.88464721,7.50875108 6.36577313,7.02762515 L7.02762515,6.36577313 C7.50875108,5.88464721 8.28881033,5.88464721 8.76993626,6.36577313 L12,9.59583688 L15.2300637,6.36577313 C15.7111897,5.88464721 16.4912489,5.88464721 16.9723749,6.36577313 L17.6342269,7.02762515 C18.1153528,7.50875108 18.1153528,8.28881033 17.6342269,8.76993626 L14.4041631,12 Z" id="close" fill="#3B3B40"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/pip/assets/titleBarClose-default-icon.svg b/static/pip/assets/titleBarClose-default-icon.svg
new file mode 100644
index 0000000000..a96b9f2f11
--- /dev/null
+++ b/static/pip/assets/titleBarClose-default-icon.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="normal-2x" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="Path" stroke="#808086" fill="#ACACAC" cx="12" cy="12" r="11.5"></circle>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/pip/assets/titleBarClose-hover-icon.svg b/static/pip/assets/titleBarClose-hover-icon.svg
new file mode 100644
index 0000000000..418e969514
--- /dev/null
+++ b/static/pip/assets/titleBarClose-hover-icon.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="macos-close-2x" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="Path" stroke="#808086" fill="#ACACAC" cx="12" cy="12" r="11.5"></circle>
+        <path d="M14.4041631,12 L17.6342269,15.2300637 C18.1153528,15.7111897 18.1153528,16.4912489 17.6342269,16.9723749 L16.9723749,17.6342269 C16.4912489,18.1153528 15.7111897,18.1153528 15.2300637,17.6342269 L12,14.4041631 L8.76993626,17.6342269 C8.28881033,18.1153528 7.50875108,18.1153528 7.02762515,17.6342269 L6.36577313,16.9723749 C5.88464721,16.4912489 5.88464721,15.7111897 6.36577313,15.2300637 L9.59583688,12 L6.36577313,8.76993626 C5.88464721,8.28881033 5.88464721,7.50875108 6.36577313,7.02762515 L7.02762515,6.36577313 C7.50875108,5.88464721 8.28881033,5.88464721 8.76993626,6.36577313 L12,9.59583688 L15.2300637,6.36577313 C15.7111897,5.88464721 16.4912489,5.88464721 16.9723749,6.36577313 L17.6342269,7.02762515 C18.1153528,7.50875108 18.1153528,8.28881033 17.6342269,8.76993626 L14.4041631,12 Z" id="close" fill="#3B3B40"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/pip/assets/titleBarExitFull-active-icon.svg b/static/pip/assets/titleBarExitFull-active-icon.svg
new file mode 100644
index 0000000000..808882bf9c
--- /dev/null
+++ b/static/pip/assets/titleBarExitFull-active-icon.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="macos-minuse-mousedown-2x" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="Path" stroke="#808086" fill="#848484" cx="12" cy="12" r="11.5"></circle>
+        <rect id="minimize" fill="#3B3B40" x="4.5" y="10.3" width="15" height="3.4000001" rx="0.2464"></rect>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/pip/assets/titleBarExitFull-default-icon.svg b/static/pip/assets/titleBarExitFull-default-icon.svg
new file mode 100644
index 0000000000..a96b9f2f11
--- /dev/null
+++ b/static/pip/assets/titleBarExitFull-default-icon.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="normal-2x" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="Path" stroke="#808086" fill="#ACACAC" cx="12" cy="12" r="11.5"></circle>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/pip/assets/titleBarExitFull-hover-icon.svg b/static/pip/assets/titleBarExitFull-hover-icon.svg
new file mode 100644
index 0000000000..9887a28ab7
--- /dev/null
+++ b/static/pip/assets/titleBarExitFull-hover-icon.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="macos-minuse-2x" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="Path" stroke="#808086" fill="#ACACAC" cx="12" cy="12" r="11.5"></circle>
+        <rect id="minimize" fill="#3B3B40" x="4.5" y="10.3" width="15" height="3.4000001" rx="0.2464"></rect>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/pip/assets/titleBarFull-active-icon.svg b/static/pip/assets/titleBarFull-active-icon.svg
new file mode 100644
index 0000000000..2803013ab8
--- /dev/null
+++ b/static/pip/assets/titleBarFull-active-icon.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="macos-fullscreen-mousedown-2x" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="Path" stroke="#808086" fill="#848484" cx="12" cy="12" r="11.5"></circle>
+        <path d="M6.45441983,9.17730194 L14.9983398,17.6041819 L7.62481983,17.6041819 C6.97842576,17.6041819 6.45441983,17.080176 6.45441983,16.4337819 L6.45441983,9.17730194 Z M17.5455802,14.8226981 L9.00166017,6.39581806 L16.3751802,6.39581806 C17.0215742,6.39581806 17.5455802,6.91982399 17.5455802,7.56621806 L17.5455802,14.8226981 Z" id="fullscreen" fill="#3B3B40"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/pip/assets/titleBarFull-default-icon.svg b/static/pip/assets/titleBarFull-default-icon.svg
new file mode 100644
index 0000000000..a96b9f2f11
--- /dev/null
+++ b/static/pip/assets/titleBarFull-default-icon.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="normal-2x" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="Path" stroke="#808086" fill="#ACACAC" cx="12" cy="12" r="11.5"></circle>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/pip/assets/titleBarFull-hover-icon.svg b/static/pip/assets/titleBarFull-hover-icon.svg
new file mode 100644
index 0000000000..8995b2abeb
--- /dev/null
+++ b/static/pip/assets/titleBarFull-hover-icon.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="macos-fullscreen-2x" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="Path" stroke="#808086" fill="#ACACAC" cx="12" cy="12" r="11.5"></circle>
+        <path d="M6.45441983,9.17730194 L14.9983398,17.6041819 L7.62481983,17.6041819 C6.97842576,17.6041819 6.45441983,17.080176 6.45441983,16.4337819 L6.45441983,9.17730194 Z M17.5455802,14.8226981 L9.00166017,6.39581806 L16.3751802,6.39581806 C17.0215742,6.39581806 17.5455802,6.91982399 17.5455802,7.56621806 L17.5455802,14.8226981 Z" id="fullscreen" fill="#3B3B40"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/pip/assets/titleBarRecover-active-icon.svg b/static/pip/assets/titleBarRecover-active-icon.svg
new file mode 100644
index 0000000000..f77287cf11
--- /dev/null
+++ b/static/pip/assets/titleBarRecover-active-icon.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="macos-recover-mousedown-2x" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="Path" stroke="#808086" fill="#848484" cx="12" cy="12" r="11.5"></circle>
+        <path d="M12,3.57312 L20.54392,12 L13.1704,12 C12.5240059,12 12,11.4759941 12,10.8296 L12,3.57312 Z M12,20.42688 L3.45608,12 L10.8296,12 C11.4759941,12 12,12.5240059 12,13.1704 L12,20.42688 Z" id="recover" fill="#3B3B40"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/pip/assets/titleBarRecover-default-icon.svg b/static/pip/assets/titleBarRecover-default-icon.svg
new file mode 100644
index 0000000000..a96b9f2f11
--- /dev/null
+++ b/static/pip/assets/titleBarRecover-default-icon.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="normal-2x" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="Path" stroke="#808086" fill="#ACACAC" cx="12" cy="12" r="11.5"></circle>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/pip/assets/titleBarRecover-hover-icon.svg b/static/pip/assets/titleBarRecover-hover-icon.svg
new file mode 100644
index 0000000000..1e5d492ab6
--- /dev/null
+++ b/static/pip/assets/titleBarRecover-hover-icon.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="macos-recover-2x" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="Path" stroke="#808086" fill="#ACACAC" cx="12" cy="12" r="11.5"></circle>
+        <path d="M12,3.57312 L20.54392,12 L13.1704,12 C12.5240059,12 12,11.4759941 12,10.8296 L12,3.57312 Z M12,20.42688 L3.45608,12 L10.8296,12 C11.4759941,12 12,12.5240059 12,13.1704 L12,20.42688 Z" id="recover" fill="#3B3B40"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/pip/macTitlebar.html b/static/pip/macTitlebar.html
index 81d41bd8d6..204b490b6f 100644
--- a/static/pip/macTitlebar.html
+++ b/static/pip/macTitlebar.html
@@ -2,9 +2,102 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>pipTitlebar</title>
+  <title>macTitlebar</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      user-select: none;
+      -webkit-user-drag: none;
+    }
+    .titlebar {
+      width: 100%;
+      height: 36px;
+      display: flex;
+    }
+    .content {
+      margin: auto auto auto 10px;
+      display: flex;
+      flex-wrap: nowrap;
+    }
+    .titlebarClose, .titlebarMin {
+      width: 12px;
+      height: 12px;
+      margin-right: 8px;
+    }
+    .titlebarFull {
+      width: 12px;
+      height: 12px;
+    }
+    .titlebarRecover {
+      width: 12px;
+      height: 12px;
+      display: none;
+    }
+    .titlebarFull:active {
+      content: url("assets/titleBarFull-active-icon.svg");
+    }
+    .titlebarClose:active {
+      content: url("assets/titleBarClose-active-icon.svg");
+    }
+    .titlebarMin:active {
+      content: url("assets/titleBarExitFull-active-icon.svg");
+    }
+    .titlebarRecover:active {
+      content: url("assets/titleBarRecover-active-icon.svg");
+    }
+    .titlebarMax {
+      width: 12px;
+      height: 12px;
+      display: none;
+      transform: rotate(45deg);
+    }
+    .titlebarMax:active {
+      content: url("assets/titleBarClose-active-icon.svg");
+    }
+  </style>
 </head>
 <body>
-
+  <div class="titlebar">
+    <div class="content">
+      <img class="titlebarClose" src="assets/titleBarClose-default-icon.svg">
+      <img class="titlebarMin" src="assets/titleBarExitFull-default-icon.svg">
+      <img class="titlebarFull" src="assets/titleBarFull-default-icon.svg">
+      <img class="titlebarMax" src="assets/titleBarClose-hover-icon.svg">
+      <img class="titlebarRecover" src="assets/titleBarRecover-default-icon.svg">
+    </div>
+  </div>
+  <script>
+    let mouseenter = false;
+    document.querySelector('.content').addEventListener('mouseenter', (e) => {
+      mouseenter = true;
+      const fullScreen = document.querySelector('.titlebarRecover').style.display === "block" ;
+      document.querySelector('.titlebarClose').src = 'assets/titleBarClose-hover-icon.svg';
+      if (!fullScreen) {
+        if (e.altKey) {
+          document.querySelector('.titlebarFull').style.display = "none";
+          document.querySelector('.titlebarMax').style.display = "block";
+        }
+        document.querySelector('.titlebarMin').src = 'assets/titleBarExitFull-hover-icon.svg';
+        document.querySelector('.titlebarFull').src = 'assets/titleBarFull-hover-icon.svg';
+      } else {
+        document.querySelector('.titlebarRecover').src = 'assets/titlebarRecover-hover-icon.svg';
+      }
+    });
+    document.querySelector('.content').addEventListener('mouseleave', () => {
+      mouseenter = false;
+      const fullScreen = document.querySelector('.titlebarRecover').style.display === "block" ;
+      document.querySelector('.titlebarClose').src = 'assets/titleBarClose-default-icon.svg';
+      document.querySelector('.titlebarMin').src = 'assets/titleBarExitFull-default-icon.svg';
+      if (!fullScreen) {
+        document.querySelector('.titlebarFull').src = 'assets/titleBarFull-default-icon.svg';
+        document.querySelector(".titlebarFull").style.display = "block";
+        document.querySelector('.titlebarMax').style.display = "none";
+      } else {
+        document.querySelector('.titlebarRecover').src = 'assets/titlebarRecover-default-icon.svg';
+      }
+    });
+  </script>
 </body>
+
 </html>
diff --git a/static/pip/pipControl.html b/static/pip/pipControl.html
index b9e711cf91..7889236101 100644
--- a/static/pip/pipControl.html
+++ b/static/pip/pipControl.html
@@ -2,12 +2,13 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Title</title>
+  <title>pipControl</title>
   <style>
     * {
       margin: 0;
       padding: 0;
       user-select: none;
+      -webkit-user-drag: none;
     }
     .pip-buttons {
       width: 20px;
@@ -30,14 +31,14 @@
       margin-bottom: 20px;
     }
     .pip:active, .danmu:active {
-      opacity: 0.1667;
+      opacity: 0.333;
     }
   </style>
 </head>
 <body draggable="false">
-  <div class="pip-buttons" draggable="false">
-    <img class="danmu" src="../../src/renderer/assets/icon/noDanmu-default-icon.svg" draggable="false">
-    <img class="pip" src="../../src/renderer/assets/icon/pipBack-default-icon.svg" draggable="false">
+  <div class="pip-buttons">
+    <img class="danmu" src="assets/noDanmu-default-icon.svg">
+    <img class="pip" src="assets/pipBack-default-icon.svg">
   </div>
 </body>
 </html>
diff --git a/static/pip/titlebarPreload.js b/static/pip/titlebarPreload.js
new file mode 100644
index 0000000000..bc6f4c6272
--- /dev/null
+++ b/static/pip/titlebarPreload.js
@@ -0,0 +1,23 @@
+// eslint-disable-next-line no-console
+console.log('titlebar-preloaded~~~~~~~');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { ipcRenderer, remote } = require('electron');
+
+document.addEventListener('DOMContentLoaded', () => {
+  const close = document.querySelector('.titlebarClose');
+  const min = document.querySelector('.titlebarMin');
+  const full = document.querySelector('.titlebarFull');
+  const recover = document.querySelector('.titlebarRecover');
+  if (close) {
+    close.addEventListener('mouseup', () => ipcRenderer.send('mouseup', 'close'));
+  }
+  if (min) {
+    min.addEventListener('mouseup', () => ipcRenderer.send('mouseup', 'min'));
+  }
+  if (full) {
+    full.addEventListener('mouseup', () => ipcRenderer.send('mouseup', 'full'));
+  }
+  if (recover) {
+    recover.addEventListener('mouseup', () => ipcRenderer.send('mouseup', 'recover'));
+  }
+});
diff --git a/static/pip/winTitlebar.html b/static/pip/winTitlebar.html
index 6b6499c3e0..04e75bc585 100644
--- a/static/pip/winTitlebar.html
+++ b/static/pip/winTitlebar.html
@@ -2,9 +2,9 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>$Title$</title>
+  <title>Title</title>
 </head>
 <body>
-$END$
+
 </body>
 </html>

From 5f7ace51794cd424dc24a4b5a449011487d25a26 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Fri, 16 Aug 2019 15:28:33 +0800
Subject: [PATCH 009/123] fix(browsingview): add browserView before remove when
 change tab

---
 src/main/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/main/index.js b/src/main/index.js
index af66ff96de..2ee51f433b 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -518,8 +518,9 @@ function registerMainWindowEvent(mainWindow) {
       });
     } else {
       browserViews = tabGroups[index][currentBrowserHostname];
-      mainWindow.removeBrowserView(mainWindow.getBrowserView());
+      const id = mainWindow.getBrowserView().id;
       mainWindow.addBrowserView(browserViews[isPip ? 1 : 0]);
+      mainWindow.removeBrowserView(mainWindow.getBrowserViews().find(view => view.id === id));
       if (!isPip) {
         browsingWindow.removeBrowserView(browsingWindow.getBrowserViews()[0]);
         browsingWindow.addBrowserView(browserViews[1]);

From 0f5b42be7dc41c2fc948acf6edaaf9dc92828409 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Mon, 19 Aug 2019 12:11:28 +0800
Subject: [PATCH 010/123] feat(browsingview): add functions to titlebar

---
 src/main/index.js                             | 107 +++++++++++-------
 src/renderer/components/BrowsingPip.vue       |   8 --
 src/renderer/components/BrowsingView.vue      |   3 +-
 .../BrowsingView/BrowsingFavicons.vue         |   2 +-
 static/pip/macTitlebar.html                   |  31 -----
 static/pip/titlebarPreload.js                 |  53 +++++++++
 6 files changed, 121 insertions(+), 83 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index 2ee51f433b..3bf12dc269 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -461,11 +461,14 @@ function registerMainWindowEvent(mainWindow) {
   });
   ipcMain.on('pip-window-close', () => {
     const views = browsingWindow.getBrowserViews();
-    browsingWindow.removeBrowserView(views[0]);
-    browsingWindow.removeBrowserView(views[1]);
+    views.forEach((view) => {
+      browsingWindow.removeBrowserView(view);
+    });
     views[0].webContents.loadURL(initialBrowserUrl).then(() => {
       views[0].webContents.clearHistory();
     });
+    const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentPipHostname);
+    tabGroups[index][currentPipHostname].reverse();
   });
   ipcMain.on('remove-browser', () => {
     const mainView = mainWindow.getBrowserView();
@@ -487,8 +490,9 @@ function registerMainWindowEvent(mainWindow) {
     mainWindow.send('update-pip-state');
   });
   ipcMain.on('shift-page-tab', (evt, url) => {
-    const isPip = browsingWindow.isVisible();
-    currentPipHostname = isPip ? currentBrowserHostname : urlParse(url).hostname;
+    if (!browsingWindow) createBrowsingWindow();
+    const isPip = browsingWindow && browsingWindow.isVisible();
+    if (!isPip) currentPipHostname = urlParse(url).hostname;
     currentBrowserHostname = urlParse(url).hostname;
     const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentBrowserHostname);
     lastBrowserUrl = initialBrowserUrl;
@@ -519,14 +523,21 @@ function registerMainWindowEvent(mainWindow) {
     } else {
       browserViews = tabGroups[index][currentBrowserHostname];
       const id = mainWindow.getBrowserView().id;
-      mainWindow.addBrowserView(browserViews[isPip ? 1 : 0]);
-      mainWindow.removeBrowserView(mainWindow.getBrowserViews().find(view => view.id === id));
-      if (!isPip) {
-        browsingWindow.removeBrowserView(browsingWindow.getBrowserViews()[0]);
+      if (isPip) {
+        mainWindow.addBrowserView(
+          browserViews[currentPipHostname === currentBrowserHostname ? 1 : 0],
+        );
+        mainWindow.removeBrowserView(mainWindow.getBrowserViews().find(view => view.id === id));
+      } else {
+        mainWindow.addBrowserView(browserViews[0]);
+        mainWindow.removeBrowserView(mainWindow.getBrowserViews().find(view => view.id === id));
+        browsingWindow.removeBrowserView(browsingWindow.getBrowserView());
         browsingWindow.addBrowserView(browserViews[1]);
       }
     }
-    mainWindow.send('current-browser-id', browserViews.map(v => v.id));
+    const mainId = mainWindow.getBrowserViews()[0].id;
+    const browserId = browsingWindow.getBrowserViews()[0].id;
+    mainWindow.send('current-browser-id', [mainId, browserId]);
     mainWindow.send('update-browser-view', !(currentBrowserHostname !== 'blank' && index === -1));
   });
   ipcMain.on('create-browser-view', (evt, args) => {
@@ -596,10 +607,9 @@ function registerMainWindowEvent(mainWindow) {
     }
   });
   ipcMain.on('maximizable', (evt, val) => {
-    console.log(val);
     if (val) {
-      titlebarView.webContents.executeJavaScript('document.querySelector(".titlebarMax").style.display = mouseenter ? "block" : "none";'
-        + 'document.querySelector(".titlebarFull").style.display = mouseenter ? "none" : "block";');
+      titlebarView.webContents.executeJavaScript('document.querySelector(".titlebarMax").style.display = "block";'
+        + 'document.querySelector(".titlebarFull").style.display = "none"');
     } else {
       titlebarView.webContents.executeJavaScript('document.querySelector(".titlebarMax").style.display = "none";'
         + 'document.querySelector(".titlebarFull").style.display = "block";');
@@ -629,6 +639,13 @@ function registerMainWindowEvent(mainWindow) {
           + 'document.querySelector(".titlebarFull").style.display = "";'
           + 'document.querySelector(".titlebarRecover").style.display = "none";');
         break;
+      case 'max':
+        if (browsingWindow.isMaximized()) {
+          browsingWindow.unmaximize();
+        } else {
+          browsingWindow.maximize();
+        }
+        break;
       default:
         break;
     }
@@ -637,19 +654,30 @@ function registerMainWindowEvent(mainWindow) {
     const isDifferentBrowser = currentPipHostname !== '' && currentBrowserHostname !== currentPipHostname;
     const mainView = mainWindow.getBrowserView();
     mainWindow.removeBrowserView(mainView);
-    const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentBrowserHostname);
-    const browserView = browsingWindow.getBrowserViews()[0];
-    browsingWindow.removeBrowserView(browserView);
-    browsingWindow.removeBrowserView(pipControlView);
-    browsingWindow.removeBrowserView(titlebarView);
-    browserView.webContents.loadURL(isDifferentBrowser ? lastBrowserUrl : initialBrowserUrl);
+    const browViews = browsingWindow.getBrowserViews();
+    browViews.forEach((view) => {
+      browsingWindow.removeBrowserView(view);
+    });
     createPipControlView();
     createTitlebarView();
-    browsingWindow.addBrowserView(mainView);
-    browsingWindow.addBrowserView(pipControlView);
-    browsingWindow.addBrowserView(titlebarView);
-    mainWindow.addBrowserView(isDifferentBrowser ? tabGroups[index][currentBrowserHostname]
-      .find(tab => tab.id !== mainView.id) : browserView);
+    if (isDifferentBrowser) {
+      const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentBrowserHostname);
+      mainWindow.addBrowserView(tabGroups[index][currentBrowserHostname][1]);
+      browsingWindow.addBrowserView(mainView);
+      browsingWindow.addBrowserView(pipControlView);
+      browsingWindow.addBrowserView(titlebarView);
+      browViews[0].webContents.loadURL(lastBrowserUrl);
+    } else {
+      mainWindow.addBrowserView(browViews[0]);
+      browsingWindow.addBrowserView(mainView);
+      browViews[0].webContents.loadURL(initialBrowserUrl);
+      browsingWindow.addBrowserView(pipControlView);
+      browsingWindow.addBrowserView(titlebarView);
+    }
+    currentPipHostname = urlParse(browsingWindow.getBrowserViews()[0]
+      .webContents.getURL()).hostname;
+    currentBrowserHostname = urlParse(mainWindow.getBrowserView()
+      .webContents.getURL()).hostname;
     pipControlView.webContents.loadURL(`file:${require('path').resolve(__static, 'pip/pipControl.html')}`);
     pipControlView.setBackgroundColor('#00FFFFFF');
     titlebarView.webContents.loadURL(titlebarUrl);
@@ -661,26 +689,25 @@ function registerMainWindowEvent(mainWindow) {
     browsingWindow.focus();
   });
   ipcMain.on('enter-pip', () => {
-    const mainView = mainWindow.getBrowserView();
     createPipControlView();
     createTitlebarView();
     titlebarView.webContents.openDevTools({ mode: 'detach' });
     if (!browsingWindow) {
       createBrowsingWindow();
+      const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentBrowserHostname);
+      browserViews = tabGroups[index][currentBrowserHostname];
       browsingWindow.openDevTools();
-      const browView = browserViews.find(view => view.id !== mainView.id);
-      mainWindow.removeBrowserView(mainView);
-      mainWindow.addBrowserView(browView);
-      browsingWindow.addBrowserView(mainView);
+      mainWindow.removeBrowserView(browserViews[0]);
+      mainWindow.addBrowserView(browserViews[1]);
+      browsingWindow.addBrowserView(browserViews[0]);
       browsingWindow.addBrowserView(pipControlView);
       browsingWindow.addBrowserView(titlebarView);
       browsingWindow.show();
     } else {
-      const browView = browsingWindow.getBrowserView();
-      mainWindow.removeBrowserView(mainView);
-      browsingWindow.removeBrowserView(browView);
-      mainWindow.addBrowserView(browView);
-      browsingWindow.addBrowserView(mainView);
+      mainWindow.removeBrowserView(browserViews[0]);
+      browsingWindow.removeBrowserView(browserViews[1]);
+      mainWindow.addBrowserView(browserViews[1]);
+      browsingWindow.addBrowserView(browserViews[0]);
       browsingWindow.addBrowserView(pipControlView);
       browsingWindow.addBrowserView(titlebarView);
       browsingWindow.show();
@@ -702,19 +729,17 @@ function registerMainWindowEvent(mainWindow) {
     if (titlebarView) titlebarView.setBounds(args);
   });
   ipcMain.on('exit-pip', () => {
-    const mainView = mainWindow.getBrowserView();
-    const browViews = browsingWindow.getBrowserViews();
-    mainWindow.removeBrowserView(mainView);
+    mainWindow.removeBrowserView(browserViews[1]);
     if (browsingWindow) {
-      browsingWindow.removeBrowserView(browViews[0]);
+      browsingWindow.removeBrowserView(browserViews[0]);
       browsingWindow.removeBrowserView(pipControlView);
       browsingWindow.removeBrowserView(titlebarView);
     }
-    if (mainView.webContents.canGoBack()) {
-      mainView.webContents.goBack();
+    if (browserViews[1].webContents.canGoBack()) {
+      browserViews[1].webContents.goBack();
     }
-    mainWindow.addBrowserView(browViews[0]);
-    if (browsingWindow) browsingWindow.addBrowserView(mainView);
+    mainWindow.addBrowserView(browserViews[0]);
+    if (browsingWindow) browsingWindow.addBrowserView(browserViews[1]);
     if (browsingWindow) {
       if (browsingWindow.isFullScreen()) {
         hideBrowsingWindow = true;
diff --git a/src/renderer/components/BrowsingPip.vue b/src/renderer/components/BrowsingPip.vue
index b4200f3cb4..5f83e6ae74 100644
--- a/src/renderer/components/BrowsingPip.vue
+++ b/src/renderer/components/BrowsingPip.vue
@@ -14,14 +14,6 @@ export default {
     };
   },
   mounted() {
-    window.addEventListener('keydown', (e) => {
-      if (e.keyCode === 18) {
-        electron.ipcRenderer.send('maximizable', true);
-      }
-    });
-    window.addEventListener('keyup', () => {
-      electron.ipcRenderer.send('maximizable', false);
-    });
     window.addEventListener('focus', () => {
       electron.ipcRenderer.send('update-focused-window', false);
       electron.ipcRenderer.send('update-enabled', 'window.pip', true);
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 25cac685c5..95f6b7874a 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -484,8 +484,7 @@ export default {
       this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.loadURL(urlParseLax(url).protocol ? url : `https:${url}`);
     },
     pipAdapter() {
-      const parseUrl = urlParseLax(this.$electron.remote.getCurrentWindow()
-        .getBrowserViews()[0].webContents.getURL());
+      const parseUrl = urlParseLax(this.currentPipBrowserView().webContents.getURL());
       if (parseUrl.host.includes('youtube')) {
         this.pipType = 'youtube';
         this.youtubeAdapter();
diff --git a/src/renderer/components/BrowsingView/BrowsingFavicons.vue b/src/renderer/components/BrowsingView/BrowsingFavicons.vue
index f7ab88f7d2..7a4ce4ce2a 100644
--- a/src/renderer/components/BrowsingView/BrowsingFavicons.vue
+++ b/src/renderer/components/BrowsingView/BrowsingFavicons.vue
@@ -96,7 +96,7 @@ export default {
       this.faviconIndex = -1;
     },
     handleFavOpen(item: { name: string, type: string, url: string }) {
-      this.handleBookmarkOpen(this.recordUrl[item.type] ? this.recordUrl[item.type] : item.url);
+      this.handleBookmarkOpen(item.url);
     },
     handleFavAnimEnd(e: AnimationEvent) {
       const target = e.target as HTMLElement;
diff --git a/static/pip/macTitlebar.html b/static/pip/macTitlebar.html
index 204b490b6f..7710521b3a 100644
--- a/static/pip/macTitlebar.html
+++ b/static/pip/macTitlebar.html
@@ -67,37 +67,6 @@
       <img class="titlebarRecover" src="assets/titleBarRecover-default-icon.svg">
     </div>
   </div>
-  <script>
-    let mouseenter = false;
-    document.querySelector('.content').addEventListener('mouseenter', (e) => {
-      mouseenter = true;
-      const fullScreen = document.querySelector('.titlebarRecover').style.display === "block" ;
-      document.querySelector('.titlebarClose').src = 'assets/titleBarClose-hover-icon.svg';
-      if (!fullScreen) {
-        if (e.altKey) {
-          document.querySelector('.titlebarFull').style.display = "none";
-          document.querySelector('.titlebarMax').style.display = "block";
-        }
-        document.querySelector('.titlebarMin').src = 'assets/titleBarExitFull-hover-icon.svg';
-        document.querySelector('.titlebarFull').src = 'assets/titleBarFull-hover-icon.svg';
-      } else {
-        document.querySelector('.titlebarRecover').src = 'assets/titlebarRecover-hover-icon.svg';
-      }
-    });
-    document.querySelector('.content').addEventListener('mouseleave', () => {
-      mouseenter = false;
-      const fullScreen = document.querySelector('.titlebarRecover').style.display === "block" ;
-      document.querySelector('.titlebarClose').src = 'assets/titleBarClose-default-icon.svg';
-      document.querySelector('.titlebarMin').src = 'assets/titleBarExitFull-default-icon.svg';
-      if (!fullScreen) {
-        document.querySelector('.titlebarFull').src = 'assets/titleBarFull-default-icon.svg';
-        document.querySelector(".titlebarFull").style.display = "block";
-        document.querySelector('.titlebarMax').style.display = "none";
-      } else {
-        document.querySelector('.titlebarRecover').src = 'assets/titlebarRecover-default-icon.svg';
-      }
-    });
-  </script>
 </body>
 
 </html>
diff --git a/static/pip/titlebarPreload.js b/static/pip/titlebarPreload.js
index bc6f4c6272..838913695a 100644
--- a/static/pip/titlebarPreload.js
+++ b/static/pip/titlebarPreload.js
@@ -4,10 +4,60 @@ console.log('titlebar-preloaded~~~~~~~');
 const { ipcRenderer, remote } = require('electron');
 
 document.addEventListener('DOMContentLoaded', () => {
+  const titlebar = document.querySelector('.titlebar');
+  const content = document.querySelector('.content');
   const close = document.querySelector('.titlebarClose');
   const min = document.querySelector('.titlebarMin');
   const full = document.querySelector('.titlebarFull');
   const recover = document.querySelector('.titlebarRecover');
+  const max = document.querySelector('.titlebarMax');
+  let mouseenter = false;
+  if (titlebar) {
+    titlebar.addEventListener('dblclick', () => ipcRenderer.send('mouseup', 'max'));
+  }
+  if (content) {
+    document.addEventListener('keydown', (e) => {
+      const fullScreen = recover.style.display === 'block';
+      if (e.keyCode === 18 && mouseenter && !fullScreen) {
+        ipcRenderer.send('maximizable', true);
+      }
+    });
+    document.addEventListener('keyup', () => {
+      const fullScreen = recover.style.display === 'block';
+      if (!fullScreen) {
+        ipcRenderer.send('maximizable', false);
+      }
+    });
+    content.addEventListener('mouseenter', (e) => {
+      mouseenter = true;
+      remote.getCurrentWindow().getBrowserViews()[2].webContents.focus();
+      const fullScreen = recover.style.display === 'block';
+      close.src = 'assets/titleBarClose-hover-icon.svg';
+      if (!fullScreen) {
+        if (e.altKey) {
+          full.style.display = 'none';
+          max.style.display = 'block';
+        }
+        min.src = 'assets/titleBarExitFull-hover-icon.svg';
+        full.src = 'assets/titleBarFull-hover-icon.svg';
+      } else {
+        recover.src = 'assets/titlebarRecover-hover-icon.svg';
+      }
+    });
+    content.addEventListener('mouseleave', () => {
+      mouseenter = false;
+      const fullScreen = recover.style.display === 'block';
+      close.src = 'assets/titleBarClose-default-icon.svg';
+      min.src = 'assets/titleBarExitFull-default-icon.svg';
+      if (!fullScreen) {
+        full.src = 'assets/titleBarFull-default-icon.svg';
+        full.style.display = 'block';
+        max.style.display = 'none';
+      } else {
+        recover.src = 'assets/titlebarRecover-default-icon.svg';
+      }
+    });
+  }
   if (close) {
     close.addEventListener('mouseup', () => ipcRenderer.send('mouseup', 'close'));
   }
@@ -20,4 +70,7 @@ document.addEventListener('DOMContentLoaded', () => {
   if (recover) {
     recover.addEventListener('mouseup', () => ipcRenderer.send('mouseup', 'recover'));
   }
+  if (max) {
+    max.addEventListener('mouseup', () => ipcRenderer.send('mouseup', 'max'));
+  }
 });

From b8b84128455c946624ccab76cd2c059637851b1d Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Mon, 19 Aug 2019 18:41:45 +0800
Subject: [PATCH 011/123] feat(browsingview): support basic cache

---
 src/main/index.js                        | 88 ++++++++++++++----------
 src/renderer/components/BrowsingPip.vue  |  5 +-
 src/renderer/components/BrowsingView.vue | 16 ++---
 src/shared/pip/youtube.js                |  6 ++
 static/pip/macTitlebar.html              | 12 ++--
 static/pip/winTitlebar.html              | 16 ++++-
 6 files changed, 91 insertions(+), 52 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index 3bf12dc269..bb554c8c53 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -461,30 +461,31 @@ function registerMainWindowEvent(mainWindow) {
   });
   ipcMain.on('pip-window-close', () => {
     const views = browsingWindow.getBrowserViews();
+    const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentPipHostname);
+    const url = tabGroups[index][currentPipHostname]
+      .find(view => view.id !== views[0].id).webContents.getURL();
+    views[0].webContents.loadURL(url);
     views.forEach((view) => {
       browsingWindow.removeBrowserView(view);
     });
-    views[0].webContents.loadURL(initialBrowserUrl).then(() => {
-      views[0].webContents.clearHistory();
-    });
-    const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentPipHostname);
     tabGroups[index][currentPipHostname].reverse();
   });
   ipcMain.on('remove-browser', () => {
     const mainView = mainWindow.getBrowserView();
-    mainWindow.removeBrowserView(mainView);
-    if (browsingWindow) {
-      const views = browsingWindow.getBrowserViews();
-      views.forEach((view) => {
-        browsingWindow.removeBrowserView(view);
+    if (mainView) {
+      lastBrowserUrl = mainView.webContents.getURL();
+      mainWindow.removeBrowserView(mainView);
+      if (browsingWindow) {
+        const views = browsingWindow.getBrowserViews();
+        views.forEach((view) => {
+          browsingWindow.removeBrowserView(view);
+        });
+      }
+      browserViews.forEach((view) => {
+        view.destroy();
       });
+      if (browsingWindow) browsingWindow.hide();
     }
-    browserViews.forEach((view) => {
-      view.webContents.loadURL('about:blank').then(() => {
-        view.webContents.clearHistory();
-      });
-    });
-    if (browsingWindow) browsingWindow.hide();
   });
   ipcMain.on('update-pip-state', () => {
     mainWindow.send('update-pip-state');
@@ -495,7 +496,6 @@ function registerMainWindowEvent(mainWindow) {
     if (!isPip) currentPipHostname = urlParse(url).hostname;
     currentBrowserHostname = urlParse(url).hostname;
     const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentBrowserHostname);
-    lastBrowserUrl = initialBrowserUrl;
     initialBrowserUrl = url;
     if (currentBrowserHostname !== 'blank' && index === -1) {
       mainWindow.removeBrowserView(mainWindow.getBrowserView());
@@ -540,30 +540,41 @@ function registerMainWindowEvent(mainWindow) {
     mainWindow.send('current-browser-id', [mainId, browserId]);
     mainWindow.send('update-browser-view', !(currentBrowserHostname !== 'blank' && index === -1));
   });
+  ipcMain.on('keep-browsers-cache', (evt, url) => {
+    if (browsingWindow) {
+      browsingWindow.getBrowserViews()[0].webContents.loadURL(url);
+    }
+  });
   ipcMain.on('create-browser-view', (evt, args) => {
     currentBrowserHostname = currentPipHostname = urlParse(args.url).hostname;
-    if (currentBrowserHostname !== 'blank' && !Object.keys(tabGroups).includes(currentBrowserHostname)) {
-      initialBrowserUrl = args.url;
-      browserViews = [
-        new BrowserView({
-          webPreferences: {
-            preload: `${require('path').resolve(__static, 'pip/preload.js')}`,
-          },
-        }),
-        new BrowserView({
-          webPreferences: {
-            preload: `${require('path').resolve(__static, 'pip/preload.js')}`,
-          },
-        }),
-      ];
-      mainWindow.send('current-browser-id', browserViews.map(v => v.id));
+    const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentBrowserHostname);
+    initialBrowserUrl = args.url;
+    browserViews = [
+      new BrowserView({
+        webPreferences: {
+          preload: `${require('path').resolve(__static, 'pip/preload.js')}`,
+        },
+      }),
+      new BrowserView({
+        webPreferences: {
+          preload: `${require('path').resolve(__static, 'pip/preload.js')}`,
+        },
+      }),
+    ];
+    if (index === -1) {
       tabGroups.push({ [`${currentBrowserHostname}`]: browserViews });
-      mainWindow.addBrowserView(browserViews[0]);
-      browsingWindow.addBrowserView(browserViews[1]);
       browserViews.forEach((view) => {
         view.webContents.loadURL(args.url);
       });
+    } else if (tabGroups[index][currentBrowserHostname][0].isDestroyed()) {
+      tabGroups[index][currentBrowserHostname].splice(0, 2, ...browserViews);
+      browserViews.forEach((view) => {
+        view.webContents.loadURL(lastBrowserUrl);
+      });
     }
+    mainWindow.send('current-browser-id', browserViews.map(v => v.id));
+    mainWindow.addBrowserView(browserViews[0]);
+    browsingWindow.addBrowserView(browserViews[1]);
   });
   ipcMain.on('update-danmu-state', (evt, val) => {
     pipControlView.webContents.executeJavaScript(`document.querySelector(".danmu").src = ${val} ? "assets/danmu-default-icon.svg" : "assets/noDanmu-default-icon.svg"`);
@@ -666,11 +677,15 @@ function registerMainWindowEvent(mainWindow) {
       browsingWindow.addBrowserView(mainView);
       browsingWindow.addBrowserView(pipControlView);
       browsingWindow.addBrowserView(titlebarView);
-      browViews[0].webContents.loadURL(lastBrowserUrl);
+      const pipIndex = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentPipHostname);
+      const url = tabGroups[pipIndex][currentPipHostname]
+        .find(view => view.id !== browViews[0].id).webContents.getURL();
+      browViews[0].webContents.loadURL(url);
     } else {
       mainWindow.addBrowserView(browViews[0]);
       browsingWindow.addBrowserView(mainView);
-      browViews[0].webContents.loadURL(initialBrowserUrl);
+      browViews[0].webContents
+        .loadURL(mainView.webContents.history[mainView.webContents.history.length - 2]);
       browsingWindow.addBrowserView(pipControlView);
       browsingWindow.addBrowserView(titlebarView);
     }
@@ -692,6 +707,9 @@ function registerMainWindowEvent(mainWindow) {
     createPipControlView();
     createTitlebarView();
     titlebarView.webContents.openDevTools({ mode: 'detach' });
+    if (browsingWindow.getBrowserViews()[0].webContents.canGoBack()) {
+      browsingWindow.getBrowserViews()[0].webContents.goBack();
+    }
     if (!browsingWindow) {
       createBrowsingWindow();
       const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentBrowserHostname);
diff --git a/src/renderer/components/BrowsingPip.vue b/src/renderer/components/BrowsingPip.vue
index 5f83e6ae74..ce7312aa54 100644
--- a/src/renderer/components/BrowsingPip.vue
+++ b/src/renderer/components/BrowsingPip.vue
@@ -14,6 +14,9 @@ export default {
     };
   },
   mounted() {
+    electron.remote.getCurrentWindow().addListener('enter-html-full-screen', () => {
+      electron.ipcRenderer.send('mouseup', 'full');
+    });
     window.addEventListener('focus', () => {
       electron.ipcRenderer.send('update-focused-window', false);
       electron.ipcRenderer.send('update-enabled', 'window.pip', true);
@@ -47,7 +50,7 @@ export default {
 <style scoped>
 .pip {
   width: 100%;
-  height: 10px;
+  height: 36px;
   -webkit-app-region: drag;
   position: absolute;
   top: 0;
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 95f6b7874a..ae468273ed 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -79,7 +79,6 @@ export default {
       acceleratorAvailable: true,
       oldDisplayId: -1,
       backToLandingView: false,
-      browsingWindowClose: false,
       browserIds: [1, 2],
     };
   },
@@ -316,13 +315,11 @@ export default {
       this.headerToShow = headerToShow;
     });
     this.$electron.ipcRenderer.on('update-pip-state', () => {
-      this.browsingWindowClose = true;
       this.updateIsPip(false);
     });
     this.addListenerToBrowser();
   },
   beforeDestroy() {
-    this.$electron.ipcRenderer.send('remove-browser');
     asyncStorage.set('browsing', {
       pipSize: this.pipSize,
       pipPos: this.pipPos,
@@ -339,6 +336,7 @@ export default {
       this.updateIsPip(false);
     }).finally(() => {
       if (this.backToLandingView) {
+        this.$electron.ipcRenderer.send('remove-browser');
         windowRectService.uploadWindowBy(false, 'landing-view');
       }
     });
@@ -368,6 +366,9 @@ export default {
         this.newWindow(url, disposition);
       });
       this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('did-start-navigation', (e: Event, url: string) => {
+        if (url !== 'about:blank' && !this.isPip) {
+          this.$electron.ipcRenderer.send('keep-browsers-cache', url);
+        }
         this.didStartNavigation(url);
       });
       this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('did-stop-loading', this.didStopLoading);
@@ -615,12 +616,9 @@ export default {
       this.$electron.ipcRenderer.send('init-danmu-state', { opacity, barrageOpen: opacity === 1 ? this.barrageOpen : false });
     },
     exitPipOperation() {
-      if (!this.browsingWindowClose) {
-        this.$electron.ipcRenderer.send('exit-pip');
-        this.$electron.ipcRenderer.send('store-pip-pos');
-        this.handleWindowChangeExitPip();
-      }
-      this.browsingWindowClose = false;
+      this.$electron.ipcRenderer.send('exit-pip');
+      this.$electron.ipcRenderer.send('store-pip-pos');
+      this.handleWindowChangeExitPip();
       if (this.pipType === 'youtube') {
         this.youtubeRecover();
       } else if (this.pipType === 'bilibili') {
diff --git a/src/shared/pip/youtube.js b/src/shared/pip/youtube.js
index 2f8300b27b..2a58978009 100644
--- a/src/shared/pip/youtube.js
+++ b/src/shared/pip/youtube.js
@@ -8,8 +8,12 @@ const youtube = {
     + 'document.querySelector(".html5-video-container").style.height="100%";'
     + 'document.querySelector("video").style.width="100%";'
     + 'document.querySelector("video").style.height="100%";'
+    + 'document.querySelector("video").style.left="0";'
+    + 'document.querySelector("video").style.top="0";'
     + 'Object.defineProperty(document.querySelector("video").style, "width", {get: function(){return "100%"}, set: function(){}});'
     + 'Object.defineProperty(document.querySelector("video").style, "height", {get: function(){return "100%"}, set: function(){}});'
+    + 'Object.defineProperty(document.querySelector("video").style, "left", {get: function(){return "0"}, set: function(){}});'
+    + 'Object.defineProperty(document.querySelector("video").style, "top", {get: function(){return "0"}, set: function(){}});'
     + 'document.querySelector(".html5-video-player").style.background = "rgba(0, 0, 0, 1)";'
     + 'var theater = document.querySelector("#player-theater-container").childElementCount;'
     + 'if (!theater) { document.querySelector(".ytp-size-button").click() };'
@@ -21,6 +25,8 @@ const youtube = {
     + 'document.querySelector(".html5-video-player").style.position = "";'
     + 'Object.defineProperty(document.querySelector("video").style, "width", {get: function(){return this._width}, set: function(val){this._width = val;document.querySelector("video").style.setProperty("width", val);}});'
     + 'Object.defineProperty(document.querySelector("video").style, "height", {get: function(){return this._height}, set: function(val){this._height = val;document.querySelector("video").style.setProperty("height", val);}});'
+    + 'Object.defineProperty(document.querySelector("video").style, "left", {get: function(){return this._left}, set: function(val){this._left = val;document.querySelector("video").style.setProperty("left", val);}});'
+    + 'Object.defineProperty(document.querySelector("video").style, "top", {get: function(){return this._top}, set: function(val){this._top = val;document.querySelector("video").style.setProperty("top", val);}});'
     + 'Object.defineProperty(document.querySelector(".ytp-chrome-bottom").style, "width", {get: function(){return this._width}, set: function(val){this._width = val;document.querySelector(".ytp-chrome-bottom").style.setProperty("width", val);}});'
     + 'document.querySelector(".html5-video-player").style.background = "";'
     + 'if (!theater) { document.body.click();document.querySelector(".ytp-size-button").click() };'
diff --git a/static/pip/macTitlebar.html b/static/pip/macTitlebar.html
index 7710521b3a..460f55873e 100644
--- a/static/pip/macTitlebar.html
+++ b/static/pip/macTitlebar.html
@@ -34,6 +34,12 @@
       height: 12px;
       display: none;
     }
+    .titlebarMax {
+      width: 12px;
+      height: 12px;
+      display: none;
+      transform: rotate(45deg);
+    }
     .titlebarFull:active {
       content: url("assets/titleBarFull-active-icon.svg");
     }
@@ -46,12 +52,6 @@
     .titlebarRecover:active {
       content: url("assets/titleBarRecover-active-icon.svg");
     }
-    .titlebarMax {
-      width: 12px;
-      height: 12px;
-      display: none;
-      transform: rotate(45deg);
-    }
     .titlebarMax:active {
       content: url("assets/titleBarClose-active-icon.svg");
     }
diff --git a/static/pip/winTitlebar.html b/static/pip/winTitlebar.html
index 04e75bc585..1c8670c34f 100644
--- a/static/pip/winTitlebar.html
+++ b/static/pip/winTitlebar.html
@@ -2,9 +2,23 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Title</title>
+  <title>winTitlebar</title>
+  <style>
+    .titlebar {
+      width: 100%;
+      height: 36px;
+      display: flex;
+    }
+    .content {
+      right: 0;
+    }
+  </style>
 </head>
 <body>
+  <div class="titlebar">
+    <div class="content">
 
+    </div>
+  </div>
 </body>
 </html>

From 78a67af069ec43f39810f6835749cae65fca43fd Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Mon, 19 Aug 2019 19:23:42 +0800
Subject: [PATCH 012/123] fix(browsingview): fix exit pip

---
 src/main/index.js           | 47 ++++++++++++++++++++-----------------
 static/pip/winTitlebar.html |  9 +++++++
 2 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index bb554c8c53..df4d42c486 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -73,7 +73,6 @@ let currentBrowserHostname = '';
 let currentPipHostname = '';
 let tray = null;
 let pipTimer = 0;
-let initialBrowserUrl = '';
 let lastBrowserUrl = '';
 let needToRestore = false;
 let forceQuit = false; // 大退app 关闭所有windows
@@ -496,7 +495,6 @@ function registerMainWindowEvent(mainWindow) {
     if (!isPip) currentPipHostname = urlParse(url).hostname;
     currentBrowserHostname = urlParse(url).hostname;
     const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentBrowserHostname);
-    initialBrowserUrl = url;
     if (currentBrowserHostname !== 'blank' && index === -1) {
       mainWindow.removeBrowserView(mainWindow.getBrowserView());
       browserViews = [
@@ -548,7 +546,6 @@ function registerMainWindowEvent(mainWindow) {
   ipcMain.on('create-browser-view', (evt, args) => {
     currentBrowserHostname = currentPipHostname = urlParse(args.url).hostname;
     const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentBrowserHostname);
-    initialBrowserUrl = args.url;
     browserViews = [
       new BrowserView({
         webPreferences: {
@@ -714,7 +711,6 @@ function registerMainWindowEvent(mainWindow) {
       createBrowsingWindow();
       const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentBrowserHostname);
       browserViews = tabGroups[index][currentBrowserHostname];
-      browsingWindow.openDevTools();
       mainWindow.removeBrowserView(browserViews[0]);
       mainWindow.addBrowserView(browserViews[1]);
       browsingWindow.addBrowserView(browserViews[0]);
@@ -722,8 +718,10 @@ function registerMainWindowEvent(mainWindow) {
       browsingWindow.addBrowserView(titlebarView);
       browsingWindow.show();
     } else {
+      browsingWindow.getBrowserViews().forEach((view) => {
+        browsingWindow.removeBrowserView(view);
+      });
       mainWindow.removeBrowserView(browserViews[0]);
-      browsingWindow.removeBrowserView(browserViews[1]);
       mainWindow.addBrowserView(browserViews[1]);
       browsingWindow.addBrowserView(browserViews[0]);
       browsingWindow.addBrowserView(pipControlView);
@@ -747,24 +745,29 @@ function registerMainWindowEvent(mainWindow) {
     if (titlebarView) titlebarView.setBounds(args);
   });
   ipcMain.on('exit-pip', () => {
-    mainWindow.removeBrowserView(browserViews[1]);
-    if (browsingWindow) {
-      browsingWindow.removeBrowserView(browserViews[0]);
-      browsingWindow.removeBrowserView(pipControlView);
-      browsingWindow.removeBrowserView(titlebarView);
-    }
-    if (browserViews[1].webContents.canGoBack()) {
-      browserViews[1].webContents.goBack();
+    const isDifferentBrowser = currentPipHostname !== '' && currentBrowserHostname !== currentPipHostname;
+    const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentPipHostname);
+    const mainView = mainWindow.getBrowserView();
+    mainWindow.removeBrowserView(mainView);
+    const browViews = browsingWindow.getBrowserViews();
+    browViews.forEach((view) => {
+      browsingWindow.removeBrowserView(view);
+    });
+    if (isDifferentBrowser) {
+      mainWindow.addBrowserView(browViews[0]);
+      browsingWindow.addBrowserView(tabGroups[index][currentPipHostname]
+        .find(view => view.id !== browViews[0].id));
+    } else {
+      mainView.webContents
+        .loadURL(mainView.webContents.history[mainView.webContents.history.length - 2]);
+      mainWindow.addBrowserView(browViews[0]);
+      browsingWindow.addBrowserView(mainView);
     }
-    mainWindow.addBrowserView(browserViews[0]);
-    if (browsingWindow) browsingWindow.addBrowserView(browserViews[1]);
-    if (browsingWindow) {
-      if (browsingWindow.isFullScreen()) {
-        hideBrowsingWindow = true;
-        browsingWindow.setFullScreen(false);
-      } else {
-        browsingWindow.hide();
-      }
+    if (browsingWindow.isFullScreen()) {
+      hideBrowsingWindow = true;
+      browsingWindow.setFullScreen(false);
+    } else {
+      browsingWindow.hide();
     }
   });
   ipcMain.on('update-header-to-show', (e, headerToShow) => {
diff --git a/static/pip/winTitlebar.html b/static/pip/winTitlebar.html
index 1c8670c34f..503b683004 100644
--- a/static/pip/winTitlebar.html
+++ b/static/pip/winTitlebar.html
@@ -4,6 +4,12 @@
   <meta charset="UTF-8">
   <title>winTitlebar</title>
   <style>
+    * {
+      margin: 0;
+      padding: 0;
+      user-select: none;
+      -webkit-user-drag: none;
+    }
     .titlebar {
       width: 100%;
       height: 36px;
@@ -11,6 +17,9 @@
     }
     .content {
       right: 0;
+      position: absolute;
+      display: flex;
+      flex-wrap: nowrap;
     }
   </style>
 </head>

From e2ef1580e221eeccd0ce564bacdd03501a548425 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Tue, 20 Aug 2019 14:42:39 +0800
Subject: [PATCH 013/123] fix(browsingview): fix browsing control display error

---
 src/main/index.js                        | 24 +++++++--------
 src/renderer/components/BrowsingPip.vue  | 28 ++++++++++--------
 src/renderer/components/BrowsingView.vue | 37 +++++++++++++++++-------
 3 files changed, 53 insertions(+), 36 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index df4d42c486..ca27a71015 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -318,6 +318,7 @@ function createBrowsingWindow() {
     });
   }
   browsingWindow.once('ready-to-show', () => {
+    browsingWindow.webContents.openDevTools();
     // browsingWindow.show();
   });
   browsingWindow.on('leave-full-screen', () => {
@@ -468,6 +469,7 @@ function registerMainWindowEvent(mainWindow) {
       browsingWindow.removeBrowserView(view);
     });
     tabGroups[index][currentPipHostname].reverse();
+    mainWindow.send('update-pip-state');
   });
   ipcMain.on('remove-browser', () => {
     const mainView = mainWindow.getBrowserView();
@@ -486,9 +488,6 @@ function registerMainWindowEvent(mainWindow) {
       if (browsingWindow) browsingWindow.hide();
     }
   });
-  ipcMain.on('update-pip-state', () => {
-    mainWindow.send('update-pip-state');
-  });
   ipcMain.on('shift-page-tab', (evt, url) => {
     if (!browsingWindow) createBrowsingWindow();
     const isPip = browsingWindow && browsingWindow.isVisible();
@@ -539,7 +538,7 @@ function registerMainWindowEvent(mainWindow) {
     mainWindow.send('update-browser-view', !(currentBrowserHostname !== 'blank' && index === -1));
   });
   ipcMain.on('keep-browsers-cache', (evt, url) => {
-    if (browsingWindow) {
+    if (browsingWindow && !browsingWindow.getBrowserViews()[0].webContents.history.includes(url)) {
       browsingWindow.getBrowserViews()[0].webContents.loadURL(url);
     }
   });
@@ -679,10 +678,12 @@ function registerMainWindowEvent(mainWindow) {
         .find(view => view.id !== browViews[0].id).webContents.getURL();
       browViews[0].webContents.loadURL(url);
     } else {
+      const index = browViews[0].webContents.history
+        .findIndex(url => url === mainView.webContents.getURL());
+      browViews[0].webContents
+        .loadURL(mainView.webContents.history[index - 1]);
       mainWindow.addBrowserView(browViews[0]);
       browsingWindow.addBrowserView(mainView);
-      browViews[0].webContents
-        .loadURL(mainView.webContents.history[mainView.webContents.history.length - 2]);
       browsingWindow.addBrowserView(pipControlView);
       browsingWindow.addBrowserView(titlebarView);
     }
@@ -698,12 +699,12 @@ function registerMainWindowEvent(mainWindow) {
       x: 0, y: 0, width: browsingWindow.getSize()[0], height: 36,
     });
     browsingWindow.blur();
-    browsingWindow.focus();
   });
   ipcMain.on('enter-pip', () => {
     createPipControlView();
     createTitlebarView();
     titlebarView.webContents.openDevTools({ mode: 'detach' });
+    pipControlView.webContents.openDevTools({ mode: 'detach' });
     if (browsingWindow.getBrowserViews()[0].webContents.canGoBack()) {
       browsingWindow.getBrowserViews()[0].webContents.goBack();
     }
@@ -736,13 +737,10 @@ function registerMainWindowEvent(mainWindow) {
       x: 0, y: 0, width: browsingWindow.getSize()[0], height: 36,
     });
     browsingWindow.blur();
-    browsingWindow.focus();
-  });
-  ipcMain.on('set-control-bounds', (evt, args) => {
-    if (pipControlView) pipControlView.setBounds(args);
   });
-  ipcMain.on('set-titlebar-bounds', (evt, args) => {
-    if (titlebarView) titlebarView.setBounds(args);
+  ipcMain.on('set-bounds', (evt, args) => {
+    if (pipControlView) pipControlView.setBounds(args.control);
+    if (titlebarView) titlebarView.setBounds(args.titlebar);
   });
   ipcMain.on('exit-pip', () => {
     const isDifferentBrowser = currentPipHostname !== '' && currentBrowserHostname !== currentPipHostname;
diff --git a/src/renderer/components/BrowsingPip.vue b/src/renderer/components/BrowsingPip.vue
index ce7312aa54..ddbf66711b 100644
--- a/src/renderer/components/BrowsingPip.vue
+++ b/src/renderer/components/BrowsingPip.vue
@@ -21,27 +21,31 @@ export default {
       electron.ipcRenderer.send('update-focused-window', false);
       electron.ipcRenderer.send('update-enabled', 'window.pip', true);
       electron.ipcRenderer.send('update-enabled', 'window.keepPlayingWindowFront', true);
+      electron.ipcRenderer.send('update-enabled', 'history.back', false);
+      electron.ipcRenderer.send('update-enabled', 'history.forward', false);
+      electron.ipcRenderer.send('update-enabled', 'history.reload', false);
     });
     window.addEventListener('resize', throttle(() => {
       const size = electron.remote.getCurrentWindow().getSize();
       electron.ipcRenderer.send('pip-window-size', size);
-      electron.ipcRenderer.send('set-titlebar-bounds', {
-        x: 0,
-        y: 0,
-        width: size[0],
-        height: 36,
-      });
-      electron.ipcRenderer.send('set-control-bounds', {
-        x: Math.round(size[0] - 65),
-        y: Math.round(size[1] / 2 - 54),
-        width: 50,
-        height: 104,
+      electron.ipcRenderer.send('set-bounds', {
+        titlebar: {
+          x: 0,
+          y: 0,
+          width: size[0],
+          height: 36,
+        },
+        control: {
+          x: Math.round(size[0] - 65),
+          y: Math.round(size[1] / 2 - 54),
+          width: 50,
+          height: 104,
+        },
       });
     }, 100));
     window.addEventListener('beforeunload', () => {
       electron.ipcRenderer.send('store-pip-pos');
       electron.ipcRenderer.send('pip-window-close');
-      electron.ipcRenderer.send('update-pip-state');
     });
   },
 };
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index ae468273ed..eff59639e1 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -210,15 +210,9 @@ export default {
       setTimeout(() => {
         if (this.acceleratorAvailable) {
           if (!focusedOnMainWindow) {
-            this.updateIsPip(false);
-            this.exitPipOperation();
-          } else if (this.hasVideo) {
-            if (this.isPip) {
-              this.shiftPipOperation();
-            } else {
-              this.updateIsPip(true);
-              this.enterPipOperation();
-            }
+            this.handleExitPip();
+          } else {
+            this.handleEnterPip();
           }
         } else {
           this.acceleratorAvailable = true;
@@ -365,7 +359,9 @@ export default {
       this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('new-window', (e: Event, url: string, disposition: string) => {
         this.newWindow(url, disposition);
       });
-      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('did-start-navigation', (e: Event, url: string) => {
+      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('did-start-navigation', () => {
+        const url = this.$electron.remote.getCurrentWindow()
+          .getBrowserViews()[0].webContents.getURL();
         if (url !== 'about:blank' && !this.isPip) {
           this.$electron.ipcRenderer.send('keep-browsers-cache', url);
         }
@@ -461,7 +457,6 @@ export default {
           }
           break;
         default:
-          console.warn(`Unhandled ipc-message: ${channel}`, args);
           break;
       }
     },
@@ -631,12 +626,32 @@ export default {
     },
     handleEnterPip() {
       if (this.hasVideo) {
+        const loadUrl = this.$electron.remote.getCurrentWindow()
+          .getBrowserViews()[0].webContents.getURL();
+        const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
         if (this.isPip) {
           this.shiftPipOperation();
         } else {
           this.updateIsPip(true);
           this.enterPipOperation();
         }
+        this.$electron.ipcRenderer.send('update-enabled', 'window.pip', false);
+        this.$refs.browsingHeader.updateWebInfo({
+          hasVideo: false,
+          url: loadUrl,
+          canGoBack: this.$electron.remote.getCurrentWindow()
+            .getBrowserViews()[0].webContents.canGoBack(),
+          canGoForward: this.$electron.remote.getCurrentWindow()
+            .getBrowserViews()[0].webContents.canGoForward(),
+        });
+        this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
+          .executeJavaScript(this.calculateVideoNum, (r: number) => {
+            this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
+            this.$electron.ipcRenderer.send('update-enabled', 'window.pip', this.hasVideo);
+            this.$refs.browsingHeader.updateWebInfo({
+              hasVideo: this.hasVideo,
+            });
+          });
       }
     },
     handleExitPip() {

From e37a3dfadc66a815e49971452e0c237e847edb9b Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Tue, 20 Aug 2019 16:13:57 +0800
Subject: [PATCH 014/123] style(browsingview): add icons to win titlebar

---
 src/renderer/components/BrowsingPip.vue       |  13 ++-
 .../assets/titleBarWinClose-default-icon.svg  |  17 +++
 .../titleBarWinExitFull-default-icon.svg      |  17 +++
 .../assets/titleBarWinFull-default-icon.svg   |  17 +++
 .../assets/titleBarWinResize-default-icon.svg |  17 +++
 .../titleBarWinRestore-default-icon.svg       |  17 +++
 static/pip/titlebarPreload.js                 | 105 ++++++++++--------
 static/pip/winTitlebar.html                   |  21 +++-
 8 files changed, 174 insertions(+), 50 deletions(-)
 create mode 100755 static/pip/assets/titleBarWinClose-default-icon.svg
 create mode 100755 static/pip/assets/titleBarWinExitFull-default-icon.svg
 create mode 100755 static/pip/assets/titleBarWinFull-default-icon.svg
 create mode 100644 static/pip/assets/titleBarWinResize-default-icon.svg
 create mode 100644 static/pip/assets/titleBarWinRestore-default-icon.svg

diff --git a/src/renderer/components/BrowsingPip.vue b/src/renderer/components/BrowsingPip.vue
index ddbf66711b..f178fbd5b3 100644
--- a/src/renderer/components/BrowsingPip.vue
+++ b/src/renderer/components/BrowsingPip.vue
@@ -1,5 +1,10 @@
 <template>
-  <div class="pip" />
+  <div
+    :style="{
+      webkitAppRegion: isDarwin ? 'drag' : 'no-drag',
+    }"
+    class="pip"
+  />
 </template>
 
 <script lang="ts">
@@ -13,6 +18,11 @@ export default {
       supportedRecordHost: ['www.youtube.com', 'www.bilibili.com', 'www.iqiyi.com'],
     };
   },
+  computed: {
+    isDarwin() {
+      return process.platform === 'darwin';
+    },
+  },
   mounted() {
     electron.remote.getCurrentWindow().addListener('enter-html-full-screen', () => {
       electron.ipcRenderer.send('mouseup', 'full');
@@ -55,7 +65,6 @@ export default {
 .pip {
   width: 100%;
   height: 36px;
-  -webkit-app-region: drag;
   position: absolute;
   top: 0;
 }
diff --git a/static/pip/assets/titleBarWinClose-default-icon.svg b/static/pip/assets/titleBarWinClose-default-icon.svg
new file mode 100755
index 0000000000..5df1fffa20
--- /dev/null
+++ b/static/pip/assets/titleBarWinClose-default-icon.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 45 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <path d="M23.1917865,14 L27.6374687,18.4456822 L26.9456822,19.1374687 L22.5,14.6917865 L18.0543178,19.1374687 L17.3625313,18.4456822 L21.8082135,14 L17.3625313,9.55431784 L18.0543178,8.86253134 L22.5,13.3082135 L26.9456822,8.86253134 L27.6374687,9.55431784 L23.1917865,14 Z" id="path-1"></path>
+        <filter x="-24.3%" y="-24.3%" width="168.1%" height="168.1%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="1" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.258576766 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="windows-close" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="close">
+            <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+            <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/pip/assets/titleBarWinExitFull-default-icon.svg b/static/pip/assets/titleBarWinExitFull-default-icon.svg
new file mode 100755
index 0000000000..8ccd50f59f
--- /dev/null
+++ b/static/pip/assets/titleBarWinExitFull-default-icon.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 45 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <rect id="path-1" x="17.6086957" y="13.5108696" width="9.7826087" height="1"></rect>
+        <filter x="-25.6%" y="-255.6%" width="171.6%" height="815.6%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="1" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.258576766 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="windows-minimize" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="minimize">
+            <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+            <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/pip/assets/titleBarWinFull-default-icon.svg b/static/pip/assets/titleBarWinFull-default-icon.svg
new file mode 100755
index 0000000000..e4a8a3582e
--- /dev/null
+++ b/static/pip/assets/titleBarWinFull-default-icon.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 45 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <path d="M17.6086957,9.10869565 L27.3913043,9.10869565 L27.3913043,18.8913043 L17.6086957,18.8913043 L17.6086957,9.10869565 Z M18.5869565,10.0869565 L18.5869565,17.9130435 L26.4130435,17.9130435 L26.4130435,10.0869565 L18.5869565,10.0869565 Z" id="path-1"></path>
+        <filter x="-25.6%" y="-25.6%" width="171.6%" height="171.6%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="1" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.258576766 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="windows-fullscreen" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="fullscreen">
+            <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+            <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/pip/assets/titleBarWinResize-default-icon.svg b/static/pip/assets/titleBarWinResize-default-icon.svg
new file mode 100644
index 0000000000..77b1d05701
--- /dev/null
+++ b/static/pip/assets/titleBarWinResize-default-icon.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 45 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <path d="M25.1483082,12.0434783 L26.6083124,12.0434783 L26.6083124,13.0217391 L24.4561385,13.0217391 L23.4778776,13.0217391 L23.4778776,9.89130435 L24.4561385,9.89130435 L24.4561385,11.352075 L26.9456822,8.86253134 L27.6374687,9.55431784 L25.1483082,12.0434783 Z M20.3474428,16.8443437 L18.0543178,19.1374687 L17.3625313,18.4456822 L19.6560396,16.1521739 L18.1952689,16.1521739 L18.1952689,15.173913 L21.3257037,15.173913 L21.3257037,16.1521739 L21.3257037,18.3043478 L20.3474428,18.3043478 L20.3474428,16.8443437 Z" id="path-1"></path>
+        <filter x="-24.3%" y="-24.3%" width="168.1%" height="168.1%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="1" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.258576766 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="windows-resize" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="resize">
+            <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+            <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/pip/assets/titleBarWinRestore-default-icon.svg b/static/pip/assets/titleBarWinRestore-default-icon.svg
new file mode 100644
index 0000000000..5c37797061
--- /dev/null
+++ b/static/pip/assets/titleBarWinRestore-default-icon.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 45 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <path d="M25.923913,17.423913 L25.923913,19.576087 L16.923913,19.576087 L16.923913,10.576087 L19.076087,10.576087 L19.076087,8.42391304 L28.076087,8.42391304 L28.076087,17.423913 L25.923913,17.423913 Z M20.0543478,10.576087 L25.923913,10.576087 L25.923913,16.4555164 L27.0978261,16.4555164 L27.0978261,9.41203817 L20.0543478,9.41203817 L20.0543478,10.576087 Z M17.9021739,11.5642121 L17.9021739,18.6076903 L24.9456522,18.6076903 L24.9456522,11.5642121 L17.9021739,11.5642121 Z" id="path-1"></path>
+        <filter x="-22.4%" y="-22.4%" width="162.8%" height="162.8%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="1" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.258576766 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="windows-maximize" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Combined-Shape">
+            <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+            <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/pip/titlebarPreload.js b/static/pip/titlebarPreload.js
index 838913695a..7d6a1fafc6 100644
--- a/static/pip/titlebarPreload.js
+++ b/static/pip/titlebarPreload.js
@@ -2,61 +2,72 @@
 console.log('titlebar-preloaded~~~~~~~');
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { ipcRenderer, remote } = require('electron');
+const isDarwin = process.platform === 'darwin';
 
 document.addEventListener('DOMContentLoaded', () => {
   const titlebar = document.querySelector('.titlebar');
   const content = document.querySelector('.content');
-  const close = document.querySelector('.titlebarClose');
-  const min = document.querySelector('.titlebarMin');
-  const full = document.querySelector('.titlebarFull');
-  const recover = document.querySelector('.titlebarRecover');
-  const max = document.querySelector('.titlebarMax');
-  let mouseenter = false;
+  let close = null;
+  let min = null;
+  let full = null;
+  let recover = null;
+  let max = null;
   if (titlebar) {
     titlebar.addEventListener('dblclick', () => ipcRenderer.send('mouseup', 'max'));
   }
-  if (content) {
-    document.addEventListener('keydown', (e) => {
-      const fullScreen = recover.style.display === 'block';
-      if (e.keyCode === 18 && mouseenter && !fullScreen) {
-        ipcRenderer.send('maximizable', true);
-      }
-    });
-    document.addEventListener('keyup', () => {
-      const fullScreen = recover.style.display === 'block';
-      if (!fullScreen) {
-        ipcRenderer.send('maximizable', false);
-      }
-    });
-    content.addEventListener('mouseenter', (e) => {
-      mouseenter = true;
-      remote.getCurrentWindow().getBrowserViews()[2].webContents.focus();
-      const fullScreen = recover.style.display === 'block';
-      close.src = 'assets/titleBarClose-hover-icon.svg';
-      if (!fullScreen) {
-        if (e.altKey) {
-          full.style.display = 'none';
-          max.style.display = 'block';
+  if (isDarwin) {
+    close = document.querySelector('.titlebarClose');
+    min = document.querySelector('.titlebarMin');
+    full = document.querySelector('.titlebarFull');
+    recover = document.querySelector('.titlebarRecover');
+    max = document.querySelector('.titlebarMax');
+    let mouseenter = false;
+
+    if (content) {
+      document.addEventListener('keydown', (e) => {
+        const fullScreen = recover.style.display === 'block';
+        if (e.keyCode === 18 && mouseenter && !fullScreen) {
+          ipcRenderer.send('maximizable', true);
+        }
+      });
+      document.addEventListener('keyup', () => {
+        const fullScreen = recover.style.display === 'block';
+        if (!fullScreen) {
+          ipcRenderer.send('maximizable', false);
+        }
+      });
+      content.addEventListener('mouseenter', (e) => {
+        mouseenter = true;
+        remote.getCurrentWindow().getBrowserViews()[2].webContents.focus();
+        const fullScreen = recover.style.display === 'block';
+        close.src = 'assets/titleBarClose-hover-icon.svg';
+        if (!fullScreen) {
+          if (e.altKey) {
+            full.style.display = 'none';
+            max.style.display = 'block';
+          }
+          min.src = 'assets/titleBarExitFull-hover-icon.svg';
+          full.src = 'assets/titleBarFull-hover-icon.svg';
+        } else {
+          recover.src = 'assets/titlebarRecover-hover-icon.svg';
+        }
+      });
+      content.addEventListener('mouseleave', () => {
+        mouseenter = false;
+        const fullScreen = recover.style.display === 'block';
+        close.src = 'assets/titleBarClose-default-icon.svg';
+        min.src = 'assets/titleBarExitFull-default-icon.svg';
+        if (!fullScreen) {
+          full.src = 'assets/titleBarFull-default-icon.svg';
+          full.style.display = 'block';
+          max.style.display = 'none';
+        } else {
+          recover.src = 'assets/titlebarRecover-default-icon.svg';
         }
-        min.src = 'assets/titleBarExitFull-hover-icon.svg';
-        full.src = 'assets/titleBarFull-hover-icon.svg';
-      } else {
-        recover.src = 'assets/titlebarRecover-hover-icon.svg';
-      }
-    });
-    content.addEventListener('mouseleave', () => {
-      mouseenter = false;
-      const fullScreen = recover.style.display === 'block';
-      close.src = 'assets/titleBarClose-default-icon.svg';
-      min.src = 'assets/titleBarExitFull-default-icon.svg';
-      if (!fullScreen) {
-        full.src = 'assets/titleBarFull-default-icon.svg';
-        full.style.display = 'block';
-        max.style.display = 'none';
-      } else {
-        recover.src = 'assets/titlebarRecover-default-icon.svg';
-      }
-    });
+      });
+    }
+  } else {
+    console.log(123);
   }
   if (close) {
     close.addEventListener('mouseup', () => ipcRenderer.send('mouseup', 'close'));
diff --git a/static/pip/winTitlebar.html b/static/pip/winTitlebar.html
index 503b683004..389f558bd1 100644
--- a/static/pip/winTitlebar.html
+++ b/static/pip/winTitlebar.html
@@ -9,6 +9,7 @@
       padding: 0;
       user-select: none;
       -webkit-user-drag: none;
+      overflow: hidden;
     }
     .titlebar {
       width: 100%;
@@ -21,12 +22,30 @@
       display: flex;
       flex-wrap: nowrap;
     }
+    .titlebarMin, .titlebarFull, .titlebarClose {
+      width: 45px;
+      height: 36px;
+      background-color: rgba(255, 255, 255, 0);
+      transition: background-color 200ms;
+      display: flex;
+    }
+    .titlebarResize, .titlebarRestore {
+      width: 45px;
+      height: 36px;
+      background-color: rgba(255, 255, 255, 0);
+      transition: background-color 200ms;
+      display: none;
+    }
   </style>
 </head>
 <body>
   <div class="titlebar">
     <div class="content">
-
+      <img class="titlebarMin" src="assets/titleBarWinExitFull-default-icon.svg">
+      <img class="titlebarFull" src="assets/titleBarWinFull-default-icon.svg">
+      <img class="titlebarRestore" src="assets/titleBarWinRestore-default-icon.svg">
+      <img class="titlebarResize" src="assets/titleBarWinResize-default-icon.svg">
+      <img class="titlebarClose" src="assets/titleBarWinClose-default-icon.svg">
     </div>
   </div>
 </body>

From 33f4941e835bf3936856836e9eb21a7c5984563e Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Tue, 20 Aug 2019 17:33:47 +0800
Subject: [PATCH 015/123] style(browsingview): add functions to titlebar in
 windows

---
 src/main/index.js                        | 43 ++++++++++++++++++------
 src/renderer/components/BrowsingView.vue |  2 +-
 static/pip/titlebarPreload.js            | 21 +++++-------
 static/pip/winTitlebar.html              | 22 +++++++-----
 4 files changed, 57 insertions(+), 31 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index ca27a71015..c486be2691 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -632,25 +632,48 @@ function registerMainWindowEvent(mainWindow) {
         break;
       case 'full':
         browsingWindow.setFullScreen(true);
-        titlebarView.webContents.executeJavaScript('document.querySelector(".titlebarFull").src = "assets/titleBarRecover-default-icon.svg";'
-          + 'document.querySelector(".titlebarMin").style.pointerEvents = "none";'
-          + 'document.querySelector(".titlebarMin").style.opacity = "0.25";'
-          + 'document.querySelector(".titlebarFull").style.display = "none";'
-          + 'document.querySelector(".titlebarRecover").style.display = "block";');
+        if (process.platform === 'darwin') {
+          titlebarView.webContents.executeJavaScript('document.querySelector(".titlebarMin").style.pointerEvents = "none";'
+            + 'document.querySelector(".titlebarMin").style.opacity = "0.25";'
+            + 'document.querySelector(".titlebarFull").style.display = "none";'
+            + 'document.querySelector(".titlebarRecover").style.display = "block";');
+        } else {
+          titlebarView.webContents.executeJavaScript('document.querySelector(".titlebarMax").style.display = "none";'
+            + 'document.querySelector(".titlebarUnMax").style.display = "none";'
+            + 'document.querySelector(".titlebarRecover").style.display = "block";');
+        }
         break;
       case 'recover':
         browsingWindow.setFullScreen(false);
-        titlebarView.webContents.executeJavaScript('document.querySelector(".titlebarFull").src = "assets/titleBarFull-default-icon.svg";'
-          + 'document.querySelector(".titlebarMin").style.pointerEvents = "";'
-          + 'document.querySelector(".titlebarMin").style.opacity = "1";'
-          + 'document.querySelector(".titlebarFull").style.display = "";'
-          + 'document.querySelector(".titlebarRecover").style.display = "none";');
+        if (process.platform === 'darwin') {
+          titlebarView.webContents.executeJavaScript('document.querySelector(".titlebarMin").style.pointerEvents = "";'
+            + 'document.querySelector(".titlebarMin").style.opacity = "1";'
+            + 'document.querySelector(".titlebarFull").style.display = "";'
+            + 'document.querySelector(".titlebarRecover").style.display = "none";');
+        } else {
+          titlebarView.webContents.executeJavaScript('document.querySelector(".titlebarMax").style.display = "block";'
+            + 'document.querySelector(".titlebarUnMax").style.display = "none";'
+            + 'document.querySelector(".titlebarRecover").style.display = "none";');
+        }
         break;
       case 'max':
         if (browsingWindow.isMaximized()) {
           browsingWindow.unmaximize();
         } else {
           browsingWindow.maximize();
+          if (process.platform === 'win32') {
+            titlebarView.webContents.executeJavaScript('document.querySelector(".titlebarMax").style.display = "none";'
+              + 'document.querySelector(".titlebarUnMax").style.display = "block";'
+              + 'document.querySelector(".titlebarRecover").style.display = "none";');
+          }
+        }
+        break;
+      case 'unmax':
+        browsingWindow.unmaximize();
+        if (process.platform === 'win32') {
+          titlebarView.webContents.executeJavaScript('document.querySelector(".titlebarMax").style.display = "block";'
+            + 'document.querySelector(".titlebarUnMax").style.display = "none";'
+            + 'document.querySelector(".titlebarRecover").style.display = "none";');
         }
         break;
       default:
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index eff59639e1..63398fe24e 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -13,7 +13,7 @@
       :handle-url-back="handleUrlBack"
       :handle-url-forward="handleUrlForward"
       :handle-bookmark-open="handleBookmarkOpen"
-      :style="{ webkitAppRegion: 'drag' }"
+      :style="{ webkitAppRegion: isDarwin ? 'drag' : 'no-drag' }"
       v-show="headerToShow"
     />
     <div
diff --git a/static/pip/titlebarPreload.js b/static/pip/titlebarPreload.js
index 7d6a1fafc6..0282dbc24a 100644
--- a/static/pip/titlebarPreload.js
+++ b/static/pip/titlebarPreload.js
@@ -7,20 +7,16 @@ const isDarwin = process.platform === 'darwin';
 document.addEventListener('DOMContentLoaded', () => {
   const titlebar = document.querySelector('.titlebar');
   const content = document.querySelector('.content');
-  let close = null;
-  let min = null;
-  let full = null;
-  let recover = null;
-  let max = null;
+  const close = document.querySelector('.titlebarClose');
+  const min = document.querySelector('.titlebarMin');
+  const full = document.querySelector('.titlebarFull');
+  const recover = document.querySelector('.titlebarRecover');
+  const unmax = document.querySelector('.titlebarUnMax');
+  const max = document.querySelector('.titlebarMax');
   if (titlebar) {
     titlebar.addEventListener('dblclick', () => ipcRenderer.send('mouseup', 'max'));
   }
   if (isDarwin) {
-    close = document.querySelector('.titlebarClose');
-    min = document.querySelector('.titlebarMin');
-    full = document.querySelector('.titlebarFull');
-    recover = document.querySelector('.titlebarRecover');
-    max = document.querySelector('.titlebarMax');
     let mouseenter = false;
 
     if (content) {
@@ -66,8 +62,6 @@ document.addEventListener('DOMContentLoaded', () => {
         }
       });
     }
-  } else {
-    console.log(123);
   }
   if (close) {
     close.addEventListener('mouseup', () => ipcRenderer.send('mouseup', 'close'));
@@ -84,4 +78,7 @@ document.addEventListener('DOMContentLoaded', () => {
   if (max) {
     max.addEventListener('mouseup', () => ipcRenderer.send('mouseup', 'max'));
   }
+  if (unmax) {
+    unmax.addEventListener('mouseup', () => ipcRenderer.send('mouseup', 'unmax'));
+  }
 });
diff --git a/static/pip/winTitlebar.html b/static/pip/winTitlebar.html
index 389f558bd1..6e0cce3189 100644
--- a/static/pip/winTitlebar.html
+++ b/static/pip/winTitlebar.html
@@ -22,30 +22,36 @@
       display: flex;
       flex-wrap: nowrap;
     }
-    .titlebarMin, .titlebarFull, .titlebarClose {
+    .titlebarMin, .titlebarMax, .titlebarClose {
       width: 45px;
       height: 36px;
       background-color: rgba(255, 255, 255, 0);
       transition: background-color 200ms;
-      display: flex;
+      display: block;
     }
-    .titlebarResize, .titlebarRestore {
+    .titlebarUnMax, .titlebarRecover {
       width: 45px;
       height: 36px;
       background-color: rgba(255, 255, 255, 0);
       transition: background-color 200ms;
       display: none;
     }
+    .btn:hover {
+      background-color: rgba(221, 221, 221, 0.2);
+    }
+    .btn:active {
+      background-color: rgba(221, 221, 221, 0.5);
+    }
   </style>
 </head>
 <body>
   <div class="titlebar">
     <div class="content">
-      <img class="titlebarMin" src="assets/titleBarWinExitFull-default-icon.svg">
-      <img class="titlebarFull" src="assets/titleBarWinFull-default-icon.svg">
-      <img class="titlebarRestore" src="assets/titleBarWinRestore-default-icon.svg">
-      <img class="titlebarResize" src="assets/titleBarWinResize-default-icon.svg">
-      <img class="titlebarClose" src="assets/titleBarWinClose-default-icon.svg">
+      <img class="titlebarMin btn" src="assets/titleBarWinExitFull-default-icon.svg">
+      <img class="titlebarMax btn" src="assets/titleBarWinFull-default-icon.svg">
+      <img class="titlebarUnMax btn" src="assets/titleBarWinRestore-default-icon.svg">
+      <img class="titlebarRecover btn" src="assets/titleBarWinResize-default-icon.svg">
+      <img class="titlebarClose btn" src="assets/titleBarWinClose-default-icon.svg">
     </div>
   </div>
 </body>

From 86b2df2f7db518eb899429313a5f5cf2cbc270f1 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Tue, 20 Aug 2019 17:35:47 +0800
Subject: [PATCH 016/123] fix(browsingview): fix can not get browserViews after
 browsing window destroyed

---
 src/main/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index c486be2691..32f54924bb 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -728,9 +728,6 @@ function registerMainWindowEvent(mainWindow) {
     createTitlebarView();
     titlebarView.webContents.openDevTools({ mode: 'detach' });
     pipControlView.webContents.openDevTools({ mode: 'detach' });
-    if (browsingWindow.getBrowserViews()[0].webContents.canGoBack()) {
-      browsingWindow.getBrowserViews()[0].webContents.goBack();
-    }
     if (!browsingWindow) {
       createBrowsingWindow();
       const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentBrowserHostname);
@@ -742,6 +739,9 @@ function registerMainWindowEvent(mainWindow) {
       browsingWindow.addBrowserView(titlebarView);
       browsingWindow.show();
     } else {
+      if (browsingWindow.getBrowserViews()[0].webContents.canGoBack()) {
+        browsingWindow.getBrowserViews()[0].webContents.goBack();
+      }
       browsingWindow.getBrowserViews().forEach((view) => {
         browsingWindow.removeBrowserView(view);
       });

From ad74cbd0b2f620760bcb765b2d710f7d851fcd35 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Tue, 20 Aug 2019 18:10:25 +0800
Subject: [PATCH 017/123] fix(browsingview): fix exit pip error in bilibili

---
 src/main/index.js                        |  5 +++--
 src/renderer/components/BrowsingView.vue | 18 +++++++++++-------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index 32f54924bb..80b778548d 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -779,8 +779,9 @@ function registerMainWindowEvent(mainWindow) {
       browsingWindow.addBrowserView(tabGroups[index][currentPipHostname]
         .find(view => view.id !== browViews[0].id));
     } else {
-      mainView.webContents
-        .loadURL(mainView.webContents.history[mainView.webContents.history.length - 2]);
+      mainView.webContents.loadURL(mainView.webContents
+        .history[mainView.webContents.history.length >= 2
+          ? mainView.webContents.history.length - 2 : 0]);
       mainWindow.addBrowserView(browViews[0]);
       browsingWindow.addBrowserView(mainView);
     }
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 63398fe24e..e7de729bf5 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -342,13 +342,17 @@ export default {
       updateIsPip: browsingActions.UPDATE_IS_PIP,
     }),
     handleBookmarkOpen(url: string) {
-      this.removeListener();
-      this.hasVideo = false;
-      this.$electron.ipcRenderer.send('update-enabled', 'window.pip', false);
-      this.$refs.browsingHeader.updateWebInfo({
-        hasVideo: this.hasVideo,
-      });
-      this.$electron.ipcRenderer.send('shift-page-tab', url);
+      const currentUrl = this.$electron.remote.getCurrentWindow()
+        .getBrowserView().webContents.getURL();
+      if (urlParseLax(currentUrl).hostname !== urlParseLax(url).hostname) {
+        this.removeListener();
+        this.hasVideo = false;
+        this.$electron.ipcRenderer.send('update-enabled', 'window.pip', false);
+        this.$refs.browsingHeader.updateWebInfo({
+          hasVideo: this.hasVideo,
+        });
+        this.$electron.ipcRenderer.send('shift-page-tab', url);
+      }
     },
     addListenerToBrowser() {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any

From 9befb5fc5d220f41b8ebd966d10bfd6928273c2f Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Wed, 21 Aug 2019 16:26:09 +0800
Subject: [PATCH 018/123] fix(browsingview): fix some issues

---
 src/main/index.js                        | 59 +++++++++++++++---------
 src/main/menu/Menu.ts                    |  7 +++
 src/renderer/components/BrowsingPip.vue  |  5 --
 src/renderer/components/BrowsingView.vue | 56 +++++++++++++++-------
 static/pip/preload.js                    |  4 +-
 5 files changed, 86 insertions(+), 45 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index 80b778548d..aa320482f4 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -318,7 +318,6 @@ function createBrowsingWindow() {
     });
   }
   browsingWindow.once('ready-to-show', () => {
-    browsingWindow.webContents.openDevTools();
     // browsingWindow.show();
   });
   browsingWindow.on('leave-full-screen', () => {
@@ -452,7 +451,7 @@ function registerMainWindowEvent(mainWindow) {
     }
   });
   ipcMain.on('store-pip-pos', () => {
-    if (browsingWindow) {
+    if (!browsingWindow.isClosable()) {
       mainWindow.send('store-pip-pos', browsingWindow.getPosition());
     }
   });
@@ -461,15 +460,17 @@ function registerMainWindowEvent(mainWindow) {
   });
   ipcMain.on('pip-window-close', () => {
     const views = browsingWindow.getBrowserViews();
-    const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentPipHostname);
-    const url = tabGroups[index][currentPipHostname]
-      .find(view => view.id !== views[0].id).webContents.getURL();
-    views[0].webContents.loadURL(url);
-    views.forEach((view) => {
-      browsingWindow.removeBrowserView(view);
-    });
-    tabGroups[index][currentPipHostname].reverse();
-    mainWindow.send('update-pip-state');
+    if (views.length) {
+      const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentPipHostname);
+      const url = tabGroups[index][currentPipHostname]
+        .find(view => view.id !== views[0].id).webContents.getURL();
+      views[0].webContents.loadURL(url);
+      views.forEach((view) => {
+        browsingWindow.removeBrowserView(view);
+      });
+      tabGroups[index][currentPipHostname].reverse();
+      mainWindow.send('update-pip-state');
+    }
   });
   ipcMain.on('remove-browser', () => {
     const mainView = mainWindow.getBrowserView();
@@ -480,12 +481,11 @@ function registerMainWindowEvent(mainWindow) {
         const views = browsingWindow.getBrowserViews();
         views.forEach((view) => {
           browsingWindow.removeBrowserView(view);
+          view.destroy();
         });
       }
-      browserViews.forEach((view) => {
-        view.destroy();
-      });
-      if (browsingWindow) browsingWindow.hide();
+      mainView.destroy();
+      if (browsingWindow) browsingWindow.close();
     }
   });
   ipcMain.on('shift-page-tab', (evt, url) => {
@@ -527,10 +527,12 @@ function registerMainWindowEvent(mainWindow) {
         mainWindow.removeBrowserView(mainWindow.getBrowserViews().find(view => view.id === id));
       } else {
         mainWindow.addBrowserView(browserViews[0]);
-        mainWindow.removeBrowserView(mainWindow.getBrowserViews().find(view => view.id === id));
         browsingWindow.removeBrowserView(browsingWindow.getBrowserView());
         browsingWindow.addBrowserView(browserViews[1]);
       }
+      setTimeout(() => {
+        mainWindow.removeBrowserView(mainWindow.getBrowserViews().find(view => view.id === id));
+      }, 150);
     }
     const mainId = mainWindow.getBrowserViews()[0].id;
     const browserId = browsingWindow.getBrowserViews()[0].id;
@@ -591,12 +593,14 @@ function registerMainWindowEvent(mainWindow) {
   });
   ipcMain.on('mousemove', () => {
     if (browsingWindow && browsingWindow.isFocused()) {
-      pipControlView.webContents.executeJavaScript('document.querySelector(".pip-buttons").style.display = "";');
+      pipControlView.webContents.executeJavaScript('document.querySelector(".pip-buttons").style.display = "flex";');
       if (pipTimer) {
         clearTimeout(pipTimer);
       }
       pipTimer = setTimeout(() => {
-        pipControlView.webContents.executeJavaScript('document.querySelector(".pip-buttons").style.display = "none";');
+        if (pipControlView && !pipControlView.isDestroyed()) {
+          pipControlView.webContents.executeJavaScript('document.querySelector(".pip-buttons").style.display = "none";');
+        }
       }, 3000);
     }
   });
@@ -721,13 +725,12 @@ function registerMainWindowEvent(mainWindow) {
     titlebarView.setBounds({
       x: 0, y: 0, width: browsingWindow.getSize()[0], height: 36,
     });
-    browsingWindow.blur();
+    menuService.updateFocusedWindow(false);
+    browsingWindow.focus();
   });
   ipcMain.on('enter-pip', () => {
     createPipControlView();
     createTitlebarView();
-    titlebarView.webContents.openDevTools({ mode: 'detach' });
-    pipControlView.webContents.openDevTools({ mode: 'detach' });
     if (!browsingWindow) {
       createBrowsingWindow();
       const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentBrowserHostname);
@@ -754,12 +757,19 @@ function registerMainWindowEvent(mainWindow) {
     }
     pipControlView.webContents.loadURL(`file:${require('path').resolve(__static, 'pip/pipControl.html')}`);
     pipControlView.setBackgroundColor('#00FFFFFF');
+    pipControlView.setBounds({
+      x: Math.round(browsingWindow.getSize()[0] - 65),
+      y: Math.round(browsingWindow.getSize()[1] / 2 - 54),
+      width: 50,
+      height: 104,
+    });
     titlebarView.webContents.loadURL(titlebarUrl);
     titlebarView.setBackgroundColor('#00FFFFFF');
     titlebarView.setBounds({
       x: 0, y: 0, width: browsingWindow.getSize()[0], height: 36,
     });
-    browsingWindow.blur();
+    menuService.updateFocusedWindow(false);
+    browsingWindow.focus();
   });
   ipcMain.on('set-bounds', (evt, args) => {
     if (pipControlView) pipControlView.setBounds(args.control);
@@ -791,6 +801,8 @@ function registerMainWindowEvent(mainWindow) {
     } else {
       browsingWindow.hide();
     }
+    menuService.updateFocusedWindow(true);
+    mainWindow.focus();
   });
   ipcMain.on('update-header-to-show', (e, headerToShow) => {
     mainWindow.send('update-header-to-show', headerToShow);
@@ -1180,4 +1192,7 @@ app.on('activate', () => {
   } else if (!mainWindow.isVisible()) {
     mainWindow.show();
   }
+  if (browsingWindow && browsingWindow.isMinimized()) {
+    browsingWindow.restore();
+  }
 });
diff --git a/src/main/menu/Menu.ts b/src/main/menu/Menu.ts
index 77f9595114..c3c4f72c0c 100644
--- a/src/main/menu/Menu.ts
+++ b/src/main/menu/Menu.ts
@@ -186,6 +186,12 @@ export default class Menubar {
 
   public updateFocusedWindow(isMainWindow: boolean) {
     if (this.focusOnMainWindow !== isMainWindow) {
+      if (!isMainWindow) {
+        this.updateMenuItemEnabled('history.back', false);
+        this.updateMenuItemEnabled('history.forward', false);
+        this.updateMenuItemEnabled('history.reload', false);
+        this.updateMenuItemEnabled('window.pip', true);
+      }
       this.focusOnMainWindow = isMainWindow;
       this.refreshBrowsingWindowMenu();
     }
@@ -389,6 +395,7 @@ export default class Menubar {
     const minimizeMenuItem = items.find((item: MenubarMenuItem) => item.id === 'window.minimize') as IMenubarMenuItemRole;
     const maxmizeMenuItem = items.find((item: MenubarMenuItem) => item.id === 'window.maxmize') as IMenubarMenuItemAction;
     const landingViewMenuItem = items.find((item: MenubarMenuItem) => item.id === 'window.backToLandingView') as IMenubarMenuItemAction;
+    floatMenuItem.enabled = !this.focusOnMainWindow;
 
     const actions = [];
     actions.push(...[
diff --git a/src/renderer/components/BrowsingPip.vue b/src/renderer/components/BrowsingPip.vue
index f178fbd5b3..cf23278bcd 100644
--- a/src/renderer/components/BrowsingPip.vue
+++ b/src/renderer/components/BrowsingPip.vue
@@ -29,11 +29,6 @@ export default {
     });
     window.addEventListener('focus', () => {
       electron.ipcRenderer.send('update-focused-window', false);
-      electron.ipcRenderer.send('update-enabled', 'window.pip', true);
-      electron.ipcRenderer.send('update-enabled', 'window.keepPlayingWindowFront', true);
-      electron.ipcRenderer.send('update-enabled', 'history.back', false);
-      electron.ipcRenderer.send('update-enabled', 'history.forward', false);
-      electron.ipcRenderer.send('update-enabled', 'history.reload', false);
     });
     window.addEventListener('resize', throttle(() => {
       const size = electron.remote.getCurrentWindow().getSize();
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index e7de729bf5..c3a72198fc 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -144,11 +144,13 @@ export default {
       const loadUrl = this.$electron.remote.getCurrentWindow()
         .getBrowserViews()[0].webContents.getURL();
       const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
-      this.$electron.ipcRenderer.send('update-enabled', 'history.back', this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.canGoBack());
-      this.$electron.ipcRenderer.send('update-enabled', 'history.forward', this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.canGoForward());
+      this.updateCanGoBack(this.$electron.remote.getCurrentWindow()
+        .getBrowserViews()[0].webContents.canGoBack());
+      this.updateCanGoForward(this.$electron.remote.getCurrentWindow()
+        .getBrowserViews()[0].webContents.canGoForward());
       if (val) {
         this.hasVideo = false;
-        this.$electron.ipcRenderer.send('update-enabled', 'window.pip', false);
+        this.updatePipState(false);
         this.$refs.browsingHeader.updateWebInfo({
           hasVideo: this.hasVideo,
           url: loadUrl,
@@ -165,7 +167,7 @@ export default {
         this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
           .executeJavaScript(this.calculateVideoNum, (r: number) => {
             this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
-            this.$electron.ipcRenderer.send('update-enabled', 'window.pip', this.hasVideo);
+            this.updatePipState(this.hasVideo);
             this.$refs.browsingHeader.updateWebInfo({
               hasVideo: this.hasVideo,
               url: loadUrl,
@@ -221,16 +223,18 @@ export default {
     });
     window.addEventListener('focus', () => {
       this.$electron.ipcRenderer.send('update-focused-window', true);
-      this.$electron.ipcRenderer.send('update-enabled', 'history.back', this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.canGoBack());
-      this.$electron.ipcRenderer.send('update-enabled', 'history.forward', this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.canGoForward());
-      this.$electron.ipcRenderer.send('update-enabled', 'window.keepPlayingWindowFront', false);
+      this.updateCanGoBack(this.$electron.remote.getCurrentWindow()
+        .getBrowserViews()[0].webContents.canGoBack());
+      this.updateCanGoForward(this.$electron.remote.getCurrentWindow()
+        .getBrowserViews()[0].webContents.canGoForward());
+      this.updateReload(true);
       const loadUrl = this.$electron.remote.getCurrentWindow()
         .getBrowserViews()[0].webContents.getURL();
       const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
       this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
         .executeJavaScript(this.calculateVideoNum, (r: number) => {
           this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
-          this.$electron.ipcRenderer.send('update-enabled', 'window.pip', this.hasVideo);
+          this.updatePipState(this.hasVideo);
         });
     });
     window.addEventListener('beforeunload', (e: BeforeUnloadEvent) => {
@@ -278,7 +282,7 @@ export default {
         this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
           .executeJavaScript(this.calculateVideoNum, (r: number) => {
             this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
-            this.$electron.ipcRenderer.send('update-enabled', 'window.pip', this.hasVideo);
+            this.updatePipState(this.hasVideo);
             this.$refs.browsingHeader.updateWebInfo({
               hasVideo: this.hasVideo,
               url: loadUrl,
@@ -341,13 +345,33 @@ export default {
       updateBarrageOpen: browsingActions.UPDATE_BARRAGE_OPEN,
       updateIsPip: browsingActions.UPDATE_IS_PIP,
     }),
+    updateReload(val: boolean) {
+      if (this.$electron.remote.getCurrentWindow().isFocused()) {
+        this.$electron.ipcRenderer.send('update-enabled', 'history.reload', val);
+      }
+    },
+    updatePipState(available: boolean) {
+      if (this.$electron.remote.getCurrentWindow().isFocused()) {
+        this.$electron.ipcRenderer.send('update-enabled', 'window.pip', available);
+      }
+    },
+    updateCanGoBack(val: boolean) {
+      if (this.$electron.remote.getCurrentWindow().isFocused()) {
+        this.$electron.ipcRenderer.send('update-enabled', 'history.back', val);
+      }
+    },
+    updateCanGoForward(val: boolean) {
+      if (this.$electron.remote.getCurrentWindow().isFocused()) {
+        this.$electron.ipcRenderer.send('update-enabled', 'history.forward', val);
+      }
+    },
     handleBookmarkOpen(url: string) {
       const currentUrl = this.$electron.remote.getCurrentWindow()
         .getBrowserView().webContents.getURL();
       if (urlParseLax(currentUrl).hostname !== urlParseLax(url).hostname) {
         this.removeListener();
         this.hasVideo = false;
-        this.$electron.ipcRenderer.send('update-enabled', 'window.pip', false);
+        this.updatePipState(false);
         this.$refs.browsingHeader.updateWebInfo({
           hasVideo: this.hasVideo,
         });
@@ -363,13 +387,13 @@ export default {
       this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('new-window', (e: Event, url: string, disposition: string) => {
         this.newWindow(url, disposition);
       });
-      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('did-start-navigation', () => {
+      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('did-start-loading', () => {
         const url = this.$electron.remote.getCurrentWindow()
           .getBrowserViews()[0].webContents.getURL();
         if (url !== 'about:blank' && !this.isPip) {
           this.$electron.ipcRenderer.send('keep-browsers-cache', url);
         }
-        this.didStartNavigation(url);
+        this.didStartLoading(url);
       });
       this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('did-stop-loading', this.didStopLoading);
     },
@@ -379,7 +403,7 @@ export default {
       currentWebContents.removeListener('did-stop-loading', this.didStopLoading);
       currentWebContents.removeListener('dom-ready', this.domReady);
       currentWebContents.removeListener('ipc-message', this.ipcMessage);
-      currentWebContents.removeListener('did-start-navigation', this.didStartNavigation);
+      currentWebContents.removeListener('did-start-navigation', this.didStartLoading);
       currentWebContents.removeListener('new-window', this.newWindow);
     },
     newWindow(url: string, disposition: string) {
@@ -394,7 +418,7 @@ export default {
       this.$electron.remote.getCurrentWindow()
         .getBrowserViews()[0].setAutoResize({ width: true, height: true });
     },
-    didStartNavigation(url: string) {
+    didStartLoading(url: string) {
       if (!url || url === 'about:blank') return;
       this.startTime = new Date().getTime();
       this.loadingState = true;
@@ -639,7 +663,7 @@ export default {
           this.updateIsPip(true);
           this.enterPipOperation();
         }
-        this.$electron.ipcRenderer.send('update-enabled', 'window.pip', false);
+        this.updatePipState(false);
         this.$refs.browsingHeader.updateWebInfo({
           hasVideo: false,
           url: loadUrl,
@@ -651,7 +675,7 @@ export default {
         this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
           .executeJavaScript(this.calculateVideoNum, (r: number) => {
             this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
-            this.$electron.ipcRenderer.send('update-enabled', 'window.pip', this.hasVideo);
+            this.updatePipState(this.hasVideo);
             this.$refs.browsingHeader.updateWebInfo({
               hasVideo: this.hasVideo,
             });
diff --git a/static/pip/preload.js b/static/pip/preload.js
index 603815397b..90897f5ace 100644
--- a/static/pip/preload.js
+++ b/static/pip/preload.js
@@ -21,11 +21,11 @@ document.addEventListener('DOMContentLoaded', () => {
   const pip = document.querySelector('.pip');
   const pipBtns = document.querySelector('.pip-buttons');
   if (pipBtns) {
-    pipBtns.style.display = '';
+    pipBtns.style.display = 'flex';
     pipBtns.addEventListener('mouseenter', () => {
       if (pipTimer) clearTimeout(pipTimer);
       sendToHost('mouseenter', 'mouseenter');
-      pipBtns.style.display = '';
+      pipBtns.style.display = 'flex';
     });
     pipTimer = setTimeout(() => {
       pipBtns.style.display = 'none';

From 5f2465d0fb4ed748c79d195580f2921b9028641a Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Thu, 22 Aug 2019 19:02:08 +0800
Subject: [PATCH 019/123] feat(browsingview): refactor menu realization

---
 package.json                              |  2 +-
 src/main/menu/Menu.ts                     | 19 +++++++++++++++++++
 src/main/menu/MenuService.ts              |  7 +++++++
 src/renderer/components/BrowsingPip.vue   |  5 ++++-
 src/renderer/components/BrowsingView.vue  |  7 +++++--
 src/renderer/containers/LandingView.vue   |  2 ++
 src/renderer/services/menu/MenuService.ts |  4 ++++
 7 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 66b376d231..b45782a34e 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
     "vue-electron": "^1.0.6",
     "vue-electron-json-storage": "^1.0.1",
     "vue-i18n": "^7.7.0",
-    "vue-router": "3.0.7",
+    "vue-router": "3.1.2",
     "vuex": "^3.0.1",
     "winston": "^3.1.0",
     "winston-daily-rotate-file": "^3.9.0"
diff --git a/src/main/menu/Menu.ts b/src/main/menu/Menu.ts
index 59c167f90b..1a7e90ac97 100644
--- a/src/main/menu/Menu.ts
+++ b/src/main/menu/Menu.ts
@@ -44,6 +44,8 @@ export default class Menubar {
 
   private audioTracks: { id: string, label: string }[];
 
+  private focusOnMainWindow = true;
+
   private primarySubs: {
     id: string, label: string, checked: boolean, subtitleItem: SubtitleControlListItem,
   }[];
@@ -60,6 +62,23 @@ export default class Menubar {
     this.menuStateControl();
   }
 
+  public updateFocusedWindow(isMainWindow: boolean) {
+    if (this.focusOnMainWindow !== isMainWindow) {
+      if (!isMainWindow) {
+        this.updateMenuItemEnabled('browsing.history.back', false);
+        this.updateMenuItemEnabled('browsing.history.forward', false);
+        this.updateMenuItemEnabled('browsing.history.reload', false);
+        this.updateMenuItemEnabled('browsing.window.pip', true);
+        this.updateMenuItemEnabled('browsing.window.keepPipFront', true);
+        this.updateMenuItemLabel('browsing.window.pip', 'msg.window.exitPip');
+      } else {
+        this.updateMenuItemEnabled('browsing.window.keepPipFront', false);
+        this.updateMenuItemLabel('browsing.window.pip', 'msg.window.enterPip');
+      }
+      this.focusOnMainWindow = isMainWindow;
+    }
+  }
+
   public constructor() {
     this.locale = new Locale();
     this.currentMenuState = cloneDeep(menuTemplate as IMenubarMenuState);
diff --git a/src/main/menu/MenuService.ts b/src/main/menu/MenuService.ts
index 67145fac55..1bdf277ea3 100644
--- a/src/main/menu/MenuService.ts
+++ b/src/main/menu/MenuService.ts
@@ -20,6 +20,10 @@ export default class MenuService {
     this.menu.enableMenu(enable);
   }
 
+  public updateFocusedWindow(isFocusedOnMain: boolean) {
+    this.menu.updateFocusedWindow(isFocusedOnMain);
+  }
+
   private registeMenuActions() {
     ipcMain.on('popup-menu', () => {
       this.menu.popupMenu();
@@ -51,5 +55,8 @@ export default class MenuService {
     ipcMain.on('update-enabled', (e: Event, id: string, enabled: boolean) => {
       this.menu.updateMenuItemEnabled(id, enabled);
     });
+    ipcMain.on('update-focused-window', (e: Event, isFocusedOnMain: boolean) => {
+      this.menu.updateFocusedWindow(isFocusedOnMain);
+    });
   }
 }
diff --git a/src/renderer/components/BrowsingPip.vue b/src/renderer/components/BrowsingPip.vue
index cf23278bcd..7314682e4d 100644
--- a/src/renderer/components/BrowsingPip.vue
+++ b/src/renderer/components/BrowsingPip.vue
@@ -10,12 +10,14 @@
 <script lang="ts">
 import { throttle } from 'lodash';
 import electron from 'electron';
+import MenuService from '@/services/menu/MenuService';
 
 export default {
   name: 'BrowsingPip',
   data() {
     return {
       supportedRecordHost: ['www.youtube.com', 'www.bilibili.com', 'www.iqiyi.com'],
+      menuService: null,
     };
   },
   computed: {
@@ -24,11 +26,12 @@ export default {
     },
   },
   mounted() {
+    this.menuService = new MenuService();
     electron.remote.getCurrentWindow().addListener('enter-html-full-screen', () => {
       electron.ipcRenderer.send('mouseup', 'full');
     });
     window.addEventListener('focus', () => {
-      electron.ipcRenderer.send('update-focused-window', false);
+      this.menuService.updateFocusedWindow(false);
     });
     window.addEventListener('resize', throttle(() => {
       const size = electron.remote.getCurrentWindow().getSize();
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index c3a72198fc..3bab16b81a 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -51,6 +51,7 @@ import youtube from '../../shared/pip/youtube';
 import iqiyi, { iqiyiBarrageAdapt } from '../../shared/pip/iqiyi';
 import globalPip from '../../shared/pip/others';
 import { getValidVideoRegex, getValidSubtitleRegex } from '../../shared/utils';
+import MenuService from '@/services/menu/MenuService';
 
 export default {
   name: 'BrowsingView',
@@ -80,6 +81,7 @@ export default {
       oldDisplayId: -1,
       backToLandingView: false,
       browserIds: [1, 2],
+      menuService: null,
     };
   },
   computed: {
@@ -204,6 +206,7 @@ export default {
     this.initialBrowserViewRect();
   },
   mounted() {
+    this.menuService = new MenuService();
     this.$bus.$on('toggle-reload', this.handleUrlReload);
     this.$bus.$on('toggle-back', this.handleUrlBack);
     this.$bus.$on('toggle-forward', this.handleUrlForward);
@@ -222,7 +225,7 @@ export default {
       }, 0);
     });
     window.addEventListener('focus', () => {
-      this.$electron.ipcRenderer.send('update-focused-window', true);
+      this.menuService.updateFocusedWindow(true);
       this.updateCanGoBack(this.$electron.remote.getCurrentWindow()
         .getBrowserViews()[0].webContents.canGoBack());
       this.updateCanGoForward(this.$electron.remote.getCurrentWindow()
@@ -352,7 +355,7 @@ export default {
     },
     updatePipState(available: boolean) {
       if (this.$electron.remote.getCurrentWindow().isFocused()) {
-        this.$electron.ipcRenderer.send('update-enabled', 'window.pip', available);
+        this.menuService.updateMenuItemEnabled('browsing.window.pip', available);
       }
     },
     updateCanGoBack(val: boolean) {
diff --git a/src/renderer/containers/LandingView.vue b/src/renderer/containers/LandingView.vue
index 0a881fef1c..b557852538 100644
--- a/src/renderer/containers/LandingView.vue
+++ b/src/renderer/containers/LandingView.vue
@@ -380,6 +380,8 @@ export default {
       this.$electron.ipcRenderer.send('create-browser-view', { url: `https://www.${site}.com` });
       this.$router.push({
         name: 'browsing-view',
+      }).then(() => {
+        console.log(123);
       });
     },
     handleBrowsingOpen(url: string) {
diff --git a/src/renderer/services/menu/MenuService.ts b/src/renderer/services/menu/MenuService.ts
index 4fc8094b2e..c90df214b5 100644
--- a/src/renderer/services/menu/MenuService.ts
+++ b/src/renderer/services/menu/MenuService.ts
@@ -32,6 +32,10 @@ export default class MenuService {
     ipcRenderer.send('update-enabled', id, enabled);
   }
 
+  public updateFocusedWindow(isFocusedOnMain: boolean) {
+    ipcRenderer.send('update-focused-window', isFocusedOnMain);
+  }
+
   public resolveMute(state: boolean) {
     this.updateMenuItemChecked('audio.mute', state);
   }

From 5023150142c94207149b9e8f670f5e5a0ea5dfb7 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Fri, 23 Aug 2019 14:47:01 +0800
Subject: [PATCH 020/123] feat(browsingview): add BrowserViewManager

---
 src/main/helpers/BrowserViewManager.ts   | 94 ++++++++++++++++++++++++
 src/main/index.js                        | 88 ++++++++++++++--------
 src/renderer/components/BrowsingView.vue | 75 ++++++-------------
 src/renderer/containers/LandingView.vue  |  2 -
 4 files changed, 177 insertions(+), 82 deletions(-)
 create mode 100644 src/main/helpers/BrowserViewManager.ts

diff --git a/src/main/helpers/BrowserViewManager.ts b/src/main/helpers/BrowserViewManager.ts
new file mode 100644
index 0000000000..7a86e5017a
--- /dev/null
+++ b/src/main/helpers/BrowserViewManager.ts
@@ -0,0 +1,94 @@
+import { BrowserView } from 'electron';
+
+type ChannelData = {
+  currentIndex: number,
+  lastUpdateTime: number,
+  list: BrowserViewHistory[]
+}
+
+type BrowserViewHistory = {
+  url: string,
+  view: BrowserView
+}
+
+export class BrowserViewManager implements IBrowserViewManager {
+  private history: Map<string, ChannelData>;
+
+  private currentChannel: string;
+
+  public constructor() {
+    this.history = new Map();
+  }
+
+  public create(channel: string, url: string): BrowserViewData {
+    // 初始化频道数据
+    if (!this.history[channel]) {
+      this.history[channel] = {
+        currentIndex: 0,
+        lastUpdateTime: Date.now(),
+        list: [],
+      };
+    }
+    // 创建当前view数据
+    const page = {
+      url,
+      view: new BrowserView({
+        webPreferences: {
+          preload: `${require('path').resolve(__static, 'pip/preload.js')}`,
+        },
+      }),
+    };
+    // loadURL
+    page.view.webContents.loadURL(page.url);
+
+    this.history[channel].list.push(page);
+    this.history[channel].currentIndex = this.history[channel].list.length - 1;
+    this.history[channel].lastUpdateTime = Date.now();
+    this.currentChannel = channel;
+    return {
+      canBack: this.history[channel].list.length > 1,
+      canForward: false,
+      view: page.view,
+    };
+  }
+
+  public back(): BrowserViewData {
+    return this.jump(true);
+  }
+
+  public forward(): BrowserViewData {
+    return this.jump(false);
+  }
+
+  private jump(left: boolean): BrowserViewData {
+    const channel: ChannelData = this.history[this.currentChannel];
+    const result: BrowserViewData = {
+      canBack: false,
+      canForward: false,
+      view: undefined,
+    };
+    if (!channel) return result;
+    const { list, currentIndex } = channel;
+    const index = left ? currentIndex - 1 : currentIndex + 1;
+    if (!list || index < 0) return result;
+    if (!list[currentIndex]) return result;
+    if (index > 0) result.canBack = true;
+    if (index < list.length) result.canForward = true;
+    result.view = list[index].view;
+    channel.lastUpdateTime = Date.now();
+    channel.currentIndex = index;
+    return result;
+  }
+}
+
+export type BrowserViewData = {
+  canBack: boolean,
+  canForward: boolean,
+  view?: BrowserView,
+}
+
+export interface IBrowserViewManager {
+  create(channel: string, url: string): BrowserViewData
+  back(): BrowserViewData
+  forward(): BrowserViewData
+}
diff --git a/src/main/index.js b/src/main/index.js
index 7848a2d374..378cd42176 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -18,6 +18,7 @@ import { getValidVideoRegex, getValidSubtitleRegex } from '../shared/utils';
 import { mouse } from './helpers/mouse';
 import MenuService from './menu/MenuService';
 import registerMediaTasks from './helpers/mediaTasksPlugin';
+import { BrowserViewManager } from './helpers/BrowserViewManager';
 
 // requestSingleInstanceLock is not going to work for mas
 // https://github.com/electron-userland/electron-packager/issues/923
@@ -66,6 +67,7 @@ let laborWindow = null;
 let aboutWindow = null;
 let preferenceWindow = null;
 let browsingWindow = null;
+let browserViewManager = null;
 let pipControlView = null;
 let titlebarView = null;
 let browserViews = [];
@@ -73,7 +75,6 @@ let currentBrowserHostname = '';
 let currentPipHostname = '';
 let tray = null;
 let pipTimer = 0;
-let lastBrowserUrl = '';
 let needToRestore = false;
 let forceQuit = false; // 大退app 关闭所有windows
 let needBlockCloseLaborWindow = true; // 标记是否阻塞nsfw窗口关闭
@@ -468,7 +469,6 @@ function registerMainWindowEvent(mainWindow) {
   ipcMain.on('remove-browser', () => {
     const mainView = mainWindow.getBrowserView();
     if (mainView) {
-      lastBrowserUrl = mainView.webContents.getURL();
       mainWindow.removeBrowserView(mainView);
       if (browsingWindow) {
         const views = browsingWindow.getBrowserViews();
@@ -537,35 +537,65 @@ function registerMainWindowEvent(mainWindow) {
       browsingWindow.getBrowserViews()[0].webContents.loadURL(url);
     }
   });
+  ipcMain.on('go-to-offset', (evt, val) => {
+    if (!browserViewManager) return;
+    const newBrowser = val === 1 ? browserViewManager.forward() : browserViewManager.back();
+    mainWindow.removeBrowserView(mainWindow.getBrowserView());
+    mainWindow.addBrowserView(newBrowser.view);
+    console.log(newBrowser);
+    newBrowser.view.setBounds({
+      x: 0, y: 36, width: mainWindow.getSize()[0], height: mainWindow.getSize()[1] - 36,
+    });
+    newBrowser.view.setAutoResize({
+      width: true, height: true,
+    });
+    mainWindow.send('update-browser-state', { canGoBack: newBrowser.canBack, canGoForward: newBrowser.canForward });
+  });
   ipcMain.on('create-browser-view', (evt, args) => {
-    currentBrowserHostname = currentPipHostname = urlParse(args.url).hostname;
-    const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentBrowserHostname);
-    browserViews = [
-      new BrowserView({
-        webPreferences: {
-          preload: `${require('path').resolve(__static, 'pip/preload.js')}`,
-        },
-      }),
-      new BrowserView({
-        webPreferences: {
-          preload: `${require('path').resolve(__static, 'pip/preload.js')}`,
-        },
-      }),
-    ];
-    if (index === -1) {
-      tabGroups.push({ [`${currentBrowserHostname}`]: browserViews });
-      browserViews.forEach((view) => {
-        view.webContents.loadURL(args.url);
-      });
-    } else if (tabGroups[index][currentBrowserHostname][0].isDestroyed()) {
-      tabGroups[index][currentBrowserHostname].splice(0, 2, ...browserViews);
-      browserViews.forEach((view) => {
-        view.webContents.loadURL(lastBrowserUrl);
-      });
+    if (!browserViewManager) browserViewManager = new BrowserViewManager();
+    const currentMainBrowserView = browserViewManager.create(urlParse(args.url).hostname, args.url);
+    const isMainBrowser = mainWindow.getBrowserView();
+    if (isMainBrowser) {
+      mainWindow.removeBrowserView(mainWindow.getBrowserViews()[0]);
+      mainWindow.addBrowserView(currentMainBrowserView.view); // TODO need to pause video
+    } else {
+      mainWindow.addBrowserView(currentMainBrowserView.view);
     }
-    mainWindow.send('current-browser-id', browserViews.map(v => v.id));
-    mainWindow.addBrowserView(browserViews[0]);
-    browsingWindow.addBrowserView(browserViews[1]);
+    currentMainBrowserView.view.setBounds({
+      x: 0, y: 36, width: mainWindow.getSize()[0], height: mainWindow.getSize()[1] - 36,
+    });
+    currentMainBrowserView.view.setAutoResize({
+      width: true, height: true,
+    });
+    mainWindow.send('update-browser-state', { url: args.url, canGoBack: currentMainBrowserView.canBack, canGoForward: currentMainBrowserView.canForward });
+    // currentBrowserHostname = currentPipHostname = urlParse(args.url).hostname;
+    // const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentBrowserHostname);
+    // browserViews = [
+    //   new BrowserView({
+    //     webPreferences: {
+    //       preload: `${require('path').resolve(__static, 'pip/preload.js')}`,
+    //     },
+    //   }),
+    //   new BrowserView({
+    //     webPreferences: {
+    //       preload: `${require('path').resolve(__static, 'pip/preload.js')}`,
+    //     },
+    //   }),
+    // ];
+    // if (index === -1) {
+    //   tabGroups.push({ [`${currentBrowserHostname}`]: browserViews });
+    //   browserViews.forEach((view) => {
+    //     view.webContents.loadURL(args.url);
+    //   });
+    // } else if (tabGroups[index][currentBrowserHostname][0].isDestroyed()) {
+    //   tabGroups[index][currentBrowserHostname].splice(0, 2, ...browserViews);
+    //   browserViews.forEach((view) => {
+    //     view.webContents.loadURL(lastBrowserUrl);
+    //   });
+    // }
+    // mainWindow.send('current-browser-id', browserViews.map(v => v.id));
+    // mainWindow.addBrowserView(browserViews[0]);
+    // browsingWindow.addBrowserView(browserViews[1]);
   });
   ipcMain.on('update-danmu-state', (evt, val) => {
     pipControlView.webContents.executeJavaScript(`document.querySelector(".danmu").src = ${val} ? "assets/danmu-default-icon.svg" : "assets/noDanmu-default-icon.svg"`);
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 3bab16b81a..2235b0d681 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -82,6 +82,9 @@ export default {
       backToLandingView: false,
       browserIds: [1, 2],
       menuService: null,
+      currentUrl: '',
+      canGoBack: false,
+      canGoForward: false,
     };
   },
   computed: {
@@ -155,11 +158,6 @@ export default {
         this.updatePipState(false);
         this.$refs.browsingHeader.updateWebInfo({
           hasVideo: this.hasVideo,
-          url: loadUrl,
-          canGoBack: this.$electron.remote.getCurrentWindow()
-            .getBrowserViews()[0].webContents.canGoBack(),
-          canGoForward: this.$electron.remote.getCurrentWindow()
-            .getBrowserViews()[0].webContents.canGoForward(),
         });
       } else {
         if (this.pipRestore) {
@@ -172,11 +170,6 @@ export default {
             this.updatePipState(this.hasVideo);
             this.$refs.browsingHeader.updateWebInfo({
               hasVideo: this.hasVideo,
-              url: loadUrl,
-              canGoBack: this.$electron.remote.getCurrentWindow()
-                .getBrowserViews()[0].webContents.canGoBack(),
-              canGoForward: this.$electron.remote.getCurrentWindow()
-                .getBrowserViews()[0].webContents.canGoForward(),
             });
           });
       }
@@ -203,7 +196,6 @@ export default {
     );
     this.$store.dispatch('updateBrowsingPos', this.winPos);
     this.$electron.ipcRenderer.send('callMainWindowMethod', 'setAspectRatio', [0]);
-    this.initialBrowserViewRect();
   },
   mounted() {
     this.menuService = new MenuService();
@@ -288,11 +280,6 @@ export default {
             this.updatePipState(this.hasVideo);
             this.$refs.browsingHeader.updateWebInfo({
               hasVideo: this.hasVideo,
-              url: loadUrl,
-              canGoBack: this.$electron.remote.getCurrentWindow()
-                .getBrowserViews()[0].webContents.canGoBack(),
-              canGoForward: this.$electron.remote.getCurrentWindow()
-                .getBrowserViews()[0].webContents.canGoForward(),
             });
           });
       }
@@ -318,6 +305,16 @@ export default {
     this.$electron.ipcRenderer.on('update-pip-state', () => {
       this.updateIsPip(false);
     });
+    this.$electron.ipcRenderer.on('update-browser-state', (e: Event, state: { url?: string, canGoBack: boolean, canGoForward: boolean }) => {
+      if (state.url) this.currentUrl = state.url;
+      this.addListenerToBrowser();
+      this.canGoBack = state.canGoBack;
+      this.canGoForward = state.canGoForward;
+      this.$refs.browsingHeader.updateWebInfo({
+        canGoBack: state.canGoBack,
+        canGoForward: state.canGoForward,
+      });
+    });
     this.addListenerToBrowser();
   },
   beforeDestroy() {
@@ -392,10 +389,9 @@ export default {
       });
       this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('did-start-loading', () => {
         const url = this.$electron.remote.getCurrentWindow()
-          .getBrowserViews()[0].webContents.getURL();
-        if (url !== 'about:blank' && !this.isPip) {
-          this.$electron.ipcRenderer.send('keep-browsers-cache', url);
-        }
+          .getBrowserView().webContents.getURL();
+        if (!url || url === 'about:blank' || urlParseLax(this.currentUrl).href === urlParseLax(url).href) return;
+        this.currentUrl = url;
         this.didStartLoading(url);
       });
       this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('did-stop-loading', this.didStopLoading);
@@ -422,27 +418,10 @@ export default {
         .getBrowserViews()[0].setAutoResize({ width: true, height: true });
     },
     didStartLoading(url: string) {
-      if (!url || url === 'about:blank') return;
       this.startTime = new Date().getTime();
       this.loadingState = true;
-      const loadUrl = this.$electron.remote.getCurrentWindow()
-        .getBrowserViews()[0].webContents.getURL();
-      const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
-      if (recordIndex !== -1) {
-        switch (recordIndex) {
-          case 0:
-            this.updateRecordUrl({ youtube: loadUrl });
-            break;
-          case 1:
-            this.updateRecordUrl({ bilibili: loadUrl });
-            break;
-          case 2:
-            this.updateRecordUrl({ iqiyi: loadUrl });
-            break;
-          default:
-            break;
-        }
-      }
+      this.$electron.ipcRenderer.send('create-browser-view', { url });
+      this.removeListener();
     },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ipcMessage(channel: string, args: any) {
@@ -507,8 +486,8 @@ export default {
       }
     },
     handleOpenUrl({ url }: { url: string }) {
-      if (!url || url === 'about:blank') return;
-      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.loadURL(urlParseLax(url).protocol ? url : `https:${url}`);
+      if (!url || url === 'about:blank' || url === this.$electron.remote.getCurrentWindow().getBrowserView().webContents.getURL()) return;
+      this.$electron.ipcRenderer.send('create-browser-view', { url });
     },
     pipAdapter() {
       const parseUrl = urlParseLax(this.currentPipBrowserView().webContents.getURL());
@@ -607,14 +586,13 @@ export default {
       }
     },
     handleUrlForward() {
-      if (this.$electron.remote.getCurrentWindow()
-        .getBrowserViews()[0].webContents.canGoForward()) {
-        this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.goForward();
+      if (this.canGoForward) {
+        this.$electron.ipcRenderer.send('go-to-offset', 1);
       }
     },
     handleUrlBack() {
-      if (this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.canGoBack()) {
-        this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.goBack();
+      if (this.canGoBack) {
+        this.$electron.ipcRenderer.send('go-to-offset', -1);
       }
     },
     handleUrlReload() {
@@ -669,11 +647,6 @@ export default {
         this.updatePipState(false);
         this.$refs.browsingHeader.updateWebInfo({
           hasVideo: false,
-          url: loadUrl,
-          canGoBack: this.$electron.remote.getCurrentWindow()
-            .getBrowserViews()[0].webContents.canGoBack(),
-          canGoForward: this.$electron.remote.getCurrentWindow()
-            .getBrowserViews()[0].webContents.canGoForward(),
         });
         this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
           .executeJavaScript(this.calculateVideoNum, (r: number) => {
diff --git a/src/renderer/containers/LandingView.vue b/src/renderer/containers/LandingView.vue
index b557852538..0a881fef1c 100644
--- a/src/renderer/containers/LandingView.vue
+++ b/src/renderer/containers/LandingView.vue
@@ -380,8 +380,6 @@ export default {
       this.$electron.ipcRenderer.send('create-browser-view', { url: `https://www.${site}.com` });
       this.$router.push({
         name: 'browsing-view',
-      }).then(() => {
-        console.log(123);
       });
     },
     handleBrowsingOpen(url: string) {

From 79e88cba83c864d61ac365a7d9d1d574874a0007 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Mon, 26 Aug 2019 19:26:44 +0800
Subject: [PATCH 021/123] feat(browsingview): realize new process

---
 src/main/helpers/BrowserViewManager.ts        | 107 +++++-
 src/main/index.js                             | 340 ++++++++----------
 src/renderer/components/BrowsingView.vue      | 193 +++++-----
 .../BrowsingView/BrowsingHeader.vue           |  10 +
 static/pip/preload.js                         |  10 +-
 5 files changed, 347 insertions(+), 313 deletions(-)

diff --git a/src/main/helpers/BrowserViewManager.ts b/src/main/helpers/BrowserViewManager.ts
index 7a86e5017a..6cd57d3822 100644
--- a/src/main/helpers/BrowserViewManager.ts
+++ b/src/main/helpers/BrowserViewManager.ts
@@ -16,8 +16,22 @@ export class BrowserViewManager implements IBrowserViewManager {
 
   private currentChannel: string;
 
+  private currentPip: {
+    pipIndex: number,
+    pipChannel: string,
+    pipPage: BrowserViewHistory,
+  };
+
   public constructor() {
     this.history = new Map();
+    this.currentPip = {
+      pipIndex: -1,
+      pipChannel: '',
+      pipPage: {
+        url: '',
+        view: new BrowserView(),
+      },
+    };
   }
 
   public create(channel: string, url: string): BrowserViewData {
@@ -40,6 +54,11 @@ export class BrowserViewManager implements IBrowserViewManager {
     };
     // loadURL
     page.view.webContents.loadURL(page.url);
+    const lastPage = this.history[channel].list[this.history[channel].list.length - 1];
+    // last view go back
+    if (lastPage) {
+      lastPage.view.webContents.loadURL(lastPage.url);
+    }
 
     this.history[channel].list.push(page);
     this.history[channel].currentIndex = this.history[channel].list.length - 1;
@@ -60,12 +79,88 @@ export class BrowserViewManager implements IBrowserViewManager {
     return this.jump(false);
   }
 
+  public changeChanel(channel: string, url: string): BrowserViewData {
+    if (!this.history[channel]) {
+      return this.create(channel, url);
+    }
+    this.currentChannel = channel;
+    this.history[channel].lastUpdateTime = Date.now();
+    return {
+      canBack: this.history[channel].currentIndex > 0,
+      canForward: this.history[channel].currentIndex < this.history[channel].list.length - 1,
+      page: this.history[channel].list[this.history[channel].currentIndex],
+    };
+  }
+
+  public enterPip(): { pipBrowser: BrowserView; mainBrowser: BrowserViewData } {
+    const currentIndex = this.history[this.currentChannel].currentIndex;
+    const list = this.history[this.currentChannel].list;
+    const pipBrowser = list[currentIndex].view;
+    this.currentPip = {
+      pipIndex: currentIndex,
+      pipChannel: this.currentChannel,
+      pipPage: this.history[this.currentChannel].list.splice(currentIndex, 1)[0],
+    };
+    this.history[this.currentChannel].list.splice(currentIndex, 1);
+    this.history[this.currentChannel].lastUpdateTime = Date.now();
+    this.history[this.currentChannel].currentIndex = currentIndex - 1;
+    const mainBrowser = {
+      canBack: currentIndex - 1 > 0,
+      canForward: false,
+      page: list[currentIndex - 1],
+    };
+    return { pipBrowser, mainBrowser };
+  }
+
+  public exitPip(): BrowserViewData { // normal exit
+    const { pipIndex, pipChannel } = this.currentPip;
+    const list = this.history[pipChannel].list;
+    this.history[pipChannel].list = list
+      .filter((page: BrowserViewHistory, index: number) => index < pipIndex);
+    const deleteList = list.slice(pipIndex, list.length);
+    deleteList.forEach((page: BrowserViewHistory) => {
+      page.view.destroy();
+    });
+    this.history[pipChannel].list.push(this.currentPip.pipPage);
+    this.history[pipChannel].currentIndex = pipIndex;
+    this.history[pipChannel].lastUpdateTime = Date.now();
+    this.currentChannel = pipChannel;
+    this.currentPip.pipIndex = -1;
+    this.currentPip.pipChannel = '';
+    this.currentPip.pipPage = {
+      url: '',
+      view: new BrowserView(),
+    };
+    return {
+      canBack: this.history[this.currentChannel].currentIndex > 0,
+      canForward: false,
+      page: this.history[this.currentChannel].list[this.history[this.currentChannel].currentIndex],
+    };
+  }
+
+  public changePip(channel: string): { pipBrowser: Electron.BrowserView;
+    mainBrowser: BrowserViewData } {
+    this.currentChannel = channel;
+    // TODO clear last pip browserView
+    return this.enterPip();
+  }
+
+  public pipClose(): void {
+    this.currentPip.pipPage.view.destroy();
+    this.currentPip.pipIndex = -1;
+    this.currentPip.pipChannel = '';
+    this.currentPip.pipPage = {
+      url: '',
+      view: new BrowserView(),
+    };
+  }
+
   private jump(left: boolean): BrowserViewData {
     const channel: ChannelData = this.history[this.currentChannel];
     const result: BrowserViewData = {
       canBack: false,
       canForward: false,
-      view: undefined,
+      page: undefined,
     };
     if (!channel) return result;
     const { list, currentIndex } = channel;
@@ -73,8 +168,8 @@ export class BrowserViewManager implements IBrowserViewManager {
     if (!list || index < 0) return result;
     if (!list[currentIndex]) return result;
     if (index > 0) result.canBack = true;
-    if (index < list.length) result.canForward = true;
-    result.view = list[index].view;
+    if (index < list.length - 1) result.canForward = true;
+    result.page = list[index];
     channel.lastUpdateTime = Date.now();
     channel.currentIndex = index;
     return result;
@@ -84,6 +179,7 @@ export class BrowserViewManager implements IBrowserViewManager {
 export type BrowserViewData = {
   canBack: boolean,
   canForward: boolean,
+  page?: BrowserViewHistory
   view?: BrowserView,
 }
 
@@ -91,4 +187,9 @@ export interface IBrowserViewManager {
   create(channel: string, url: string): BrowserViewData
   back(): BrowserViewData
   forward(): BrowserViewData
+  changeChanel(channel: string, url: string): BrowserViewData
+  enterPip(): { pipBrowser: BrowserView, mainBrowser: BrowserViewData }
+  exitPip(): BrowserViewData
+  changePip(channel: string): { pipBrowser: BrowserView, mainBrowser: BrowserViewData }
+  pipClose(): void
 }
diff --git a/src/main/index.js b/src/main/index.js
index 378cd42176..a26ec2c7c1 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -70,9 +70,6 @@ let browsingWindow = null;
 let browserViewManager = null;
 let pipControlView = null;
 let titlebarView = null;
-let browserViews = [];
-let currentBrowserHostname = '';
-let currentPipHostname = '';
 let tray = null;
 let pipTimer = 0;
 let needToRestore = false;
@@ -81,7 +78,6 @@ let needBlockCloseLaborWindow = true; // 标记是否阻塞nsfw窗口关闭
 let inited = false;
 let hideBrowsingWindow = false;
 let finalVideoToOpen = [];
-const tabGroups = [];
 const tmpVideoToOpen = [];
 const tmpSubsToOpen = [];
 const subRegex = getValidSubtitleRegex();
@@ -134,12 +130,21 @@ function handleBossKey() {
 }
 
 function createPipControlView() {
-  if (pipControlView) pipControlView.destroy();
+  if (pipControlView && !pipControlView.isDestroyed()) pipControlView.destroy();
   pipControlView = new BrowserView({
     webPreferences: {
       preload: `${require('path').resolve(__static, 'pip/preload.js')}`,
     },
   });
+  browsingWindow.addBrowserView(pipControlView);
+  pipControlView.webContents.loadURL(`file:${require('path').resolve(__static, 'pip/pipControl.html')}`);
+  pipControlView.setBackgroundColor('#00FFFFFF');
+  pipControlView.setBounds({
+    x: Math.round(browsingWindow.getSize()[0] - 65),
+    y: Math.round(browsingWindow.getSize()[1] / 2 - 54),
+    width: 50,
+    height: 104,
+  });
 }
 
 function createTitlebarView() {
@@ -149,6 +154,12 @@ function createTitlebarView() {
       preload: `${require('path').resolve(__static, 'pip/titlebarPreload.js')}`,
     },
   });
+  browsingWindow.addBrowserView(titlebarView);
+  titlebarView.webContents.loadURL(titlebarUrl);
+  titlebarView.setBackgroundColor('#00FFFFFF');
+  titlebarView.setBounds({
+    x: 0, y: 0, width: browsingWindow.getSize()[0], height: 36,
+  });
 }
 
 function markNeedToRestore() {
@@ -452,108 +463,72 @@ function registerMainWindowEvent(mainWindow) {
   ipcMain.on('pip-window-size', (evt, size) => {
     mainWindow.send('pip-window-size', size);
   });
+  ipcMain.on('pip-watcher', (evt, args) => {
+    browsingWindow.getBrowserViews()[0].webContents.executeJavaScript(args);
+  });
   ipcMain.on('pip-window-close', () => {
     const views = browsingWindow.getBrowserViews();
     if (views.length) {
-      const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentPipHostname);
-      const url = tabGroups[index][currentPipHostname]
-        .find(view => view.id !== views[0].id).webContents.getURL();
-      views[0].webContents.loadURL(url);
       views.forEach((view) => {
         browsingWindow.removeBrowserView(view);
       });
-      tabGroups[index][currentPipHostname].reverse();
+      browserViewManager.pipClose();
       mainWindow.send('update-pip-state');
     }
   });
   ipcMain.on('remove-browser', () => {
     const mainView = mainWindow.getBrowserView();
-    if (mainView) {
-      mainWindow.removeBrowserView(mainView);
-      if (browsingWindow) {
-        const views = browsingWindow.getBrowserViews();
-        views.forEach((view) => {
-          browsingWindow.removeBrowserView(view);
-          view.destroy();
-        });
-      }
-      mainView.destroy();
-      if (browsingWindow) browsingWindow.close();
-    }
-  });
-  ipcMain.on('shift-page-tab', (evt, url) => {
-    if (!browsingWindow) createBrowsingWindow();
-    const isPip = browsingWindow && browsingWindow.isVisible();
-    if (!isPip) currentPipHostname = urlParse(url).hostname;
-    currentBrowserHostname = urlParse(url).hostname;
-    const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentBrowserHostname);
-    if (currentBrowserHostname !== 'blank' && index === -1) {
-      mainWindow.removeBrowserView(mainWindow.getBrowserView());
-      browserViews = [
-        new BrowserView({
-          webPreferences: {
-            preload: `${require('path').resolve(__static, 'pip/preload.js')}`,
-          },
-        }),
-        new BrowserView({
-          webPreferences: {
-            preload: `${require('path').resolve(__static, 'pip/preload.js')}`,
-          },
-        }),
-      ];
-      tabGroups.push({ [`${currentBrowserHostname}`]: browserViews });
-      mainWindow.addBrowserView(browserViews[0]);
-      if (!isPip) {
-        browsingWindow.removeBrowserView(browsingWindow.getBrowserViews()[0]);
-        browsingWindow.addBrowserView(browserViews[1]);
-      }
-      browserViews.forEach((view) => {
-        view.webContents.loadURL(url);
+    // TODO need to pause video
+    mainWindow.removeBrowserView(mainView);
+    if (browsingWindow) {
+      const views = browsingWindow.getBrowserViews();
+      views.forEach((view) => {
+        browsingWindow.removeBrowserView(view);
       });
-    } else {
-      browserViews = tabGroups[index][currentBrowserHostname];
-      const id = mainWindow.getBrowserView().id;
-      if (isPip) {
-        mainWindow.addBrowserView(
-          browserViews[currentPipHostname === currentBrowserHostname ? 1 : 0],
-        );
-        mainWindow.removeBrowserView(mainWindow.getBrowserViews().find(view => view.id === id));
-      } else {
-        mainWindow.addBrowserView(browserViews[0]);
-        browsingWindow.removeBrowserView(browsingWindow.getBrowserView());
-        browsingWindow.addBrowserView(browserViews[1]);
-      }
-      setTimeout(() => {
-        mainWindow.removeBrowserView(mainWindow.getBrowserViews().find(view => view.id === id));
-      }, 150);
-    }
-    const mainId = mainWindow.getBrowserViews()[0].id;
-    const browserId = browsingWindow.getBrowserViews()[0].id;
-    mainWindow.send('current-browser-id', [mainId, browserId]);
-    mainWindow.send('update-browser-view', !(currentBrowserHostname !== 'blank' && index === -1));
-  });
-  ipcMain.on('keep-browsers-cache', (evt, url) => {
-    if (browsingWindow && !browsingWindow.getBrowserViews()[0].webContents.history.includes(url)) {
-      browsingWindow.getBrowserViews()[0].webContents.loadURL(url);
+      browserViewManager.pipClose();
+      browsingWindow.close();
     }
   });
   ipcMain.on('go-to-offset', (evt, val) => {
     if (!browserViewManager) return;
     const newBrowser = val === 1 ? browserViewManager.forward() : browserViewManager.back();
     mainWindow.removeBrowserView(mainWindow.getBrowserView());
-    mainWindow.addBrowserView(newBrowser.view);
-    console.log(newBrowser);
-    newBrowser.view.setBounds({
+    mainWindow.addBrowserView(newBrowser.page.view);
+    newBrowser.page.view.setBounds({
       x: 0, y: 36, width: mainWindow.getSize()[0], height: mainWindow.getSize()[1] - 36,
     });
-    newBrowser.view.setAutoResize({
+    newBrowser.page.view.setAutoResize({
       width: true, height: true,
     });
-    mainWindow.send('update-browser-state', { canGoBack: newBrowser.canBack, canGoForward: newBrowser.canForward });
+    mainWindow.send('update-browser-state', {
+      url: newBrowser.page.url,
+      canGoBack: newBrowser.canBack,
+      canGoForward: newBrowser.canForward,
+    });
+  });
+  ipcMain.on('change-channel', (evt, args) => {
+    if (!browserViewManager) return;
+    const newChannel = browserViewManager.changeChanel(args.channel, args.url);
+    const view = newChannel.view ? newChannel.view : newChannel.page.view;
+    const url = newChannel.view ? args.url : newChannel.page.url;
+    mainWindow.removeBrowserView(mainWindow.getBrowserView());
+    mainWindow.addBrowserView(view);
+    view.setBounds({
+      x: 0, y: 36, width: mainWindow.getSize()[0], height: mainWindow.getSize()[1] - 36,
+    });
+    view.setAutoResize({
+      width: true, height: true,
+    });
+    mainWindow.send('update-browser-state', {
+      url,
+      canGoBack: newChannel.canBack,
+      canGoForward: newChannel.canForward,
+    });
   });
   ipcMain.on('create-browser-view', (evt, args) => {
     if (!browserViewManager) browserViewManager = new BrowserViewManager();
-    const currentMainBrowserView = browserViewManager.create(urlParse(args.url).hostname, args.url);
+    const currentMainBrowserView = browserViewManager
+      .create(urlParse(args.url).hostname, args.url);
     const isMainBrowser = mainWindow.getBrowserView();
     if (isMainBrowser) {
       mainWindow.removeBrowserView(mainWindow.getBrowserViews()[0]);
@@ -567,47 +542,17 @@ function registerMainWindowEvent(mainWindow) {
     currentMainBrowserView.view.setAutoResize({
       width: true, height: true,
     });
-    mainWindow.send('update-browser-state', { url: args.url, canGoBack: currentMainBrowserView.canBack, canGoForward: currentMainBrowserView.canForward });
-    // currentBrowserHostname = currentPipHostname = urlParse(args.url).hostname;
-    // const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentBrowserHostname);
-    // browserViews = [
-    //   new BrowserView({
-    //     webPreferences: {
-    //       preload: `${require('path').resolve(__static, 'pip/preload.js')}`,
-    //     },
-    //   }),
-    //   new BrowserView({
-    //     webPreferences: {
-    //       preload: `${require('path').resolve(__static, 'pip/preload.js')}`,
-    //     },
-    //   }),
-    // ];
-    // if (index === -1) {
-    //   tabGroups.push({ [`${currentBrowserHostname}`]: browserViews });
-    //   browserViews.forEach((view) => {
-    //     view.webContents.loadURL(args.url);
-    //   });
-    // } else if (tabGroups[index][currentBrowserHostname][0].isDestroyed()) {
-    //   tabGroups[index][currentBrowserHostname].splice(0, 2, ...browserViews);
-    //   browserViews.forEach((view) => {
-    //     view.webContents.loadURL(lastBrowserUrl);
-    //   });
-    // }
-    // mainWindow.send('current-browser-id', browserViews.map(v => v.id));
-    // mainWindow.addBrowserView(browserViews[0]);
-    // browsingWindow.addBrowserView(browserViews[1]);
+    setTimeout(() => {
+      mainWindow.send('update-browser-state', {
+        url: args.url,
+        canGoBack: currentMainBrowserView.canBack,
+        canGoForward: currentMainBrowserView.canForward,
+      });
+    }, 0);
   });
   ipcMain.on('update-danmu-state', (evt, val) => {
     pipControlView.webContents.executeJavaScript(`document.querySelector(".danmu").src = ${val} ? "assets/danmu-default-icon.svg" : "assets/noDanmu-default-icon.svg"`);
   });
-  ipcMain.on('init-danmu-state', (evt, args) => {
-    pipControlView.webContents.executeJavaScript(
-      `const danmu = document.querySelector(".danmu");
-      danmu.src = ${args.barrageOpen} ? "assets/danmu-default-icon.svg" : "assets/noDanmu-default-icon.svg";
-      danmu.style.opacity = ${args.opacity};
-      danmu.style.cursor = ${args.opacity} === 1 ? "cursor" : "default"`,
-    );
-  });
   ipcMain.on('pip', () => {
     mainWindow.send('handle-exit-pip');
   });
@@ -632,7 +577,7 @@ function registerMainWindowEvent(mainWindow) {
       clearTimeout(pipTimer);
     }
   });
-  ipcMain.on('mouseleave', () => {
+  ipcMain.on('mouseout', () => {
     if (browsingWindow && browsingWindow.isFocused()) {
       if (pipTimer) {
         clearTimeout(pipTimer);
@@ -707,8 +652,8 @@ function registerMainWindowEvent(mainWindow) {
         break;
     }
   });
-  ipcMain.on('shift-pip', () => {
-    const isDifferentBrowser = currentPipHostname !== '' && currentBrowserHostname !== currentPipHostname;
+  ipcMain.on('shift-pip', (evt, args) => {
+    if (!browserViewManager) return;
     const mainView = mainWindow.getBrowserView();
     mainWindow.removeBrowserView(mainView);
     const browViews = browsingWindow.getBrowserViews();
@@ -717,80 +662,79 @@ function registerMainWindowEvent(mainWindow) {
     });
     createPipControlView();
     createTitlebarView();
-    if (isDifferentBrowser) {
-      const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentBrowserHostname);
-      mainWindow.addBrowserView(tabGroups[index][currentBrowserHostname][1]);
-      browsingWindow.addBrowserView(mainView);
-      browsingWindow.addBrowserView(pipControlView);
-      browsingWindow.addBrowserView(titlebarView);
-      const pipIndex = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentPipHostname);
-      const url = tabGroups[pipIndex][currentPipHostname]
-        .find(view => view.id !== browViews[0].id).webContents.getURL();
-      browViews[0].webContents.loadURL(url);
-    } else {
-      const index = browViews[0].webContents.history
-        .findIndex(url => url === mainView.webContents.getURL());
-      browViews[0].webContents
-        .loadURL(mainView.webContents.history[index - 1]);
-      mainWindow.addBrowserView(browViews[0]);
-      browsingWindow.addBrowserView(mainView);
-      browsingWindow.addBrowserView(pipControlView);
-      browsingWindow.addBrowserView(titlebarView);
-    }
-    currentPipHostname = urlParse(browsingWindow.getBrowserViews()[0]
-      .webContents.getURL()).hostname;
-    currentBrowserHostname = urlParse(mainWindow.getBrowserView()
-      .webContents.getURL()).hostname;
-    pipControlView.webContents.loadURL(`file:${require('path').resolve(__static, 'pip/pipControl.html')}`);
-    pipControlView.setBackgroundColor('#00FFFFFF');
-    titlebarView.webContents.loadURL(titlebarUrl);
-    titlebarView.setBackgroundColor('#00FFFFFF');
-    titlebarView.setBounds({
-      x: 0, y: 0, width: browsingWindow.getSize()[0], height: 36,
+    const browsers = browserViewManager.changePip(urlParse(mainView.webContents.getURL()).hostname);
+    const pipBrowser = browsers.pipBrowser;
+    const mainBrowser = browsers.mainBrowser;
+    mainWindow.addBrowserView(mainBrowser.page.view);
+    browsingWindow.addBrowserView(pipBrowser);
+    browsingWindow.addBrowserView(pipControlView);
+    browsingWindow.addBrowserView(titlebarView);
+    pipBrowser.setBounds({
+      x: 0, y: 0, width: browsingWindow.getSize()[0], height: browsingWindow.getSize()[1],
     });
+    pipBrowser.setAutoResize({
+      width: true, height: true,
+    });
+    mainWindow.send('update-browser-state', {
+      url: mainBrowser.page.url,
+      canGoBack: mainBrowser.canBack,
+      canGoForward: mainBrowser.canForward,
+    });
+    pipControlView.webContents.executeJavaScript(
+      `const danmu = document.querySelector(".danmu");
+      danmu.src = ${args.barrageOpen} ? "assets/danmu-default-icon.svg" : "assets/noDanmu-default-icon.svg";
+      danmu.style.opacity = ${args.opacity};
+      danmu.style.cursor = ${args.opacity} === 1 ? "cursor" : "default"`,
+    );
     menuService.updateFocusedWindow(false);
     browsingWindow.focus();
   });
-  ipcMain.on('enter-pip', () => {
-    createPipControlView();
-    createTitlebarView();
+  ipcMain.on('enter-pip', (evt, args) => {
+    if (!browserViewManager) return;
+    const browsers = browserViewManager.enterPip();
+    const pipBrowser = browsers.pipBrowser;
+    const mainBrowser = browsers.mainBrowser;
     if (!browsingWindow) {
       createBrowsingWindow();
-      const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentBrowserHostname);
-      browserViews = tabGroups[index][currentBrowserHostname];
-      mainWindow.removeBrowserView(browserViews[0]);
-      mainWindow.addBrowserView(browserViews[1]);
-      browsingWindow.addBrowserView(browserViews[0]);
-      browsingWindow.addBrowserView(pipControlView);
-      browsingWindow.addBrowserView(titlebarView);
+      mainWindow.removeBrowserView(mainWindow.getBrowserView());
+      mainWindow.addBrowserView(mainBrowser.page.view);
+      browsingWindow.addBrowserView(pipBrowser);
+      createPipControlView();
+      createTitlebarView();
       browsingWindow.show();
     } else {
-      if (browsingWindow.getBrowserViews()[0].webContents.canGoBack()) {
-        browsingWindow.getBrowserViews()[0].webContents.goBack();
-      }
-      browsingWindow.getBrowserViews().forEach((view) => {
-        browsingWindow.removeBrowserView(view);
-      });
-      mainWindow.removeBrowserView(browserViews[0]);
-      mainWindow.addBrowserView(browserViews[1]);
-      browsingWindow.addBrowserView(browserViews[0]);
-      browsingWindow.addBrowserView(pipControlView);
-      browsingWindow.addBrowserView(titlebarView);
+      mainWindow.removeBrowserView(mainWindow.getBrowserView());
+      mainWindow.addBrowserView(mainBrowser.page.view);
+      browsingWindow.addBrowserView(pipBrowser);
+      createPipControlView();
+      createTitlebarView();
       browsingWindow.show();
     }
-    pipControlView.webContents.loadURL(`file:${require('path').resolve(__static, 'pip/pipControl.html')}`);
-    pipControlView.setBackgroundColor('#00FFFFFF');
-    pipControlView.setBounds({
-      x: Math.round(browsingWindow.getSize()[0] - 65),
-      y: Math.round(browsingWindow.getSize()[1] / 2 - 54),
-      width: 50,
-      height: 104,
+    pipBrowser.webContents.openDevTools();
+    mainBrowser.page.view.setBounds({
+      x: 0, y: 36, width: mainWindow.getSize()[0], height: mainWindow.getSize()[1] - 36,
     });
-    titlebarView.webContents.loadURL(titlebarUrl);
-    titlebarView.setBackgroundColor('#00FFFFFF');
-    titlebarView.setBounds({
-      x: 0, y: 0, width: browsingWindow.getSize()[0], height: 36,
+    mainBrowser.page.view.setAutoResize({
+      width: true,
+      height: true,
     });
+    pipBrowser.setBounds({
+      x: 0, y: 0, width: browsingWindow.getSize()[0], height: browsingWindow.getSize()[1],
+    });
+    pipBrowser.setAutoResize({
+      width: true, height: true,
+    });
+    mainWindow.send('update-browser-state', {
+      url: mainBrowser.page.url,
+      canGoBack: mainBrowser.canBack,
+      canGoForward: mainBrowser.canForward,
+    });
+    pipControlView.webContents.executeJavaScript(
+      `const danmu = document.querySelector(".danmu");
+      danmu.src = ${args.barrageOpen} ? "assets/danmu-default-icon.svg" : "assets/noDanmu-default-icon.svg";
+      danmu.style.opacity = ${args.opacity};
+      danmu.style.cursor = ${args.opacity} === 1 ? "cursor" : "default"`,
+    );
     menuService.updateFocusedWindow(false);
     browsingWindow.focus();
   });
@@ -799,25 +743,27 @@ function registerMainWindowEvent(mainWindow) {
     if (titlebarView) titlebarView.setBounds(args.titlebar);
   });
   ipcMain.on('exit-pip', () => {
-    const isDifferentBrowser = currentPipHostname !== '' && currentBrowserHostname !== currentPipHostname;
-    const index = tabGroups.findIndex(tab => Object.keys(tab)[0] === currentPipHostname);
+    if (!browserViewManager) return;
     const mainView = mainWindow.getBrowserView();
     mainWindow.removeBrowserView(mainView);
     const browViews = browsingWindow.getBrowserViews();
     browViews.forEach((view) => {
       browsingWindow.removeBrowserView(view);
     });
-    if (isDifferentBrowser) {
-      mainWindow.addBrowserView(browViews[0]);
-      browsingWindow.addBrowserView(tabGroups[index][currentPipHostname]
-        .find(view => view.id !== browViews[0].id));
-    } else {
-      mainView.webContents.loadURL(mainView.webContents
-        .history[mainView.webContents.history.length >= 2
-          ? mainView.webContents.history.length - 2 : 0]);
-      mainWindow.addBrowserView(browViews[0]);
-      browsingWindow.addBrowserView(mainView);
-    }
+    const exitBrowser = browserViewManager.exitPip();
+    mainWindow.addBrowserView(exitBrowser.page.view);
+    exitBrowser.page.view.setBounds({
+      x: 0, y: 36, width: mainWindow.getSize()[0], height: mainWindow.getSize()[1] - 36,
+    });
+    exitBrowser.page.view.setAutoResize({
+      width: true,
+      height: true,
+    });
+    mainWindow.send('update-browser-state', {
+      url: exitBrowser.page.url,
+      canGoBack: exitBrowser.canBack,
+      canGoForward: exitBrowser.canForward,
+    });
     if (browsingWindow.isFullScreen()) {
       hideBrowsingWindow = true;
       browsingWindow.setFullScreen(false);
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 2235b0d681..09bd1a773e 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -85,6 +85,7 @@ export default {
       currentUrl: '',
       canGoBack: false,
       canGoForward: false,
+      adaptFinished: false,
     };
   },
   computed: {
@@ -113,6 +114,19 @@ export default {
     },
   },
   watch: {
+    hasVideo(val: boolean) {
+      this.$refs.browsingHeader.updateWebInfo({
+        hasVideo: val,
+      });
+      this.updatePipState(val);
+    },
+    adaptFinished(val: boolean) {
+      if (val) {
+        const opacity = ['youtube', 'others'].includes(this.pipType) || (this.pipType === 'bilibili' && this.bilibiliType === 'others') ? 0.2 : 1;
+        this.$electron.ipcRenderer.send(this.isPip ? 'shift-pip' : 'enter-pip', { opacity, barrageOpen: opacity === 1 ? this.barrageOpen : false });
+        this.updateIsPip(true);
+      }
+    },
     barrageOpen(val: boolean) {
       this.$electron.ipcRenderer.send('update-danmu-state', val);
     },
@@ -155,10 +169,6 @@ export default {
         .getBrowserViews()[0].webContents.canGoForward());
       if (val) {
         this.hasVideo = false;
-        this.updatePipState(false);
-        this.$refs.browsingHeader.updateWebInfo({
-          hasVideo: this.hasVideo,
-        });
       } else {
         if (this.pipRestore) {
           this.pipAdapter();
@@ -167,10 +177,6 @@ export default {
         this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
           .executeJavaScript(this.calculateVideoNum, (r: number) => {
             this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
-            this.updatePipState(this.hasVideo);
-            this.$refs.browsingHeader.updateWebInfo({
-              hasVideo: this.hasVideo,
-            });
           });
       }
     },
@@ -229,7 +235,6 @@ export default {
       this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
         .executeJavaScript(this.calculateVideoNum, (r: number) => {
           this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
-          this.updatePipState(this.hasVideo);
         });
     });
     window.addEventListener('beforeunload', (e: BeforeUnloadEvent) => {
@@ -264,26 +269,6 @@ export default {
         name: 'landing-view',
       });
     });
-    this.$electron.ipcRenderer.on('current-browser-id', (e: Event, ids: number[]) => {
-      this.browserIds = ids;
-    });
-    this.$electron.ipcRenderer.on('update-browser-view', (e: Event, isShift: boolean) => {
-      this.initialBrowserViewRect();
-      this.addListenerToBrowser();
-      if (isShift) {
-        const loadUrl = this.$electron.remote.getCurrentWindow()
-          .getBrowserViews()[0].webContents.getURL();
-        const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
-        this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
-          .executeJavaScript(this.calculateVideoNum, (r: number) => {
-            this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
-            this.updatePipState(this.hasVideo);
-            this.$refs.browsingHeader.updateWebInfo({
-              hasVideo: this.hasVideo,
-            });
-          });
-      }
-    });
     this.$electron.ipcRenderer.on('handle-exit-pip', () => {
       this.handleExitPip();
     });
@@ -305,12 +290,19 @@ export default {
     this.$electron.ipcRenderer.on('update-pip-state', () => {
       this.updateIsPip(false);
     });
-    this.$electron.ipcRenderer.on('update-browser-state', (e: Event, state: { url?: string, canGoBack: boolean, canGoForward: boolean }) => {
-      if (state.url) this.currentUrl = state.url;
+    this.$electron.ipcRenderer.on('update-browser-state', (e: Event, state: { url: string, canGoBack: boolean, canGoForward: boolean }) => {
+      this.currentUrl = state.url;
       this.addListenerToBrowser();
       this.canGoBack = state.canGoBack;
       this.canGoForward = state.canGoForward;
-      this.$refs.browsingHeader.updateWebInfo({
+      const loadUrl = this.$electron.remote.getCurrentWindow()
+        .getBrowserViews()[0].webContents.getURL();
+      const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
+      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
+        .executeJavaScript(this.calculateVideoNum, (r: number) => {
+          this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
+        });
+      this.$bus.$emit('update-web-info', {
         canGoBack: state.canGoBack,
         canGoForward: state.canGoForward,
       });
@@ -366,35 +358,27 @@ export default {
       }
     },
     handleBookmarkOpen(url: string) {
-      const currentUrl = this.$electron.remote.getCurrentWindow()
-        .getBrowserView().webContents.getURL();
-      if (urlParseLax(currentUrl).hostname !== urlParseLax(url).hostname) {
+      if (urlParseLax(this.currentUrl).hostname !== urlParseLax(url).hostname) {
         this.removeListener();
         this.hasVideo = false;
-        this.updatePipState(false);
-        this.$refs.browsingHeader.updateWebInfo({
-          hasVideo: this.hasVideo,
-        });
-        this.$electron.ipcRenderer.send('shift-page-tab', url);
+        this.$electron.ipcRenderer.send('change-channel', { url, channel: urlParseLax(url).hostname });
       }
     },
     addListenerToBrowser() {
+      const view = this.$electron.remote.getCurrentWindow().getBrowserViews()[0];
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('ipc-message', (evt: Event, channel: string, args: any) => {
+      view.webContents.addListener('ipc-message', (evt: Event, channel: string, args: any) => {
         this.ipcMessage(channel, args);
       });
-      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('dom-ready', this.domReady);
-      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('new-window', (e: Event, url: string, disposition: string) => {
+      view.webContents.addListener('dom-ready', this.domReady);
+      view.webContents.addListener('new-window', (e: Event, url: string, disposition: string) => {
         this.newWindow(url, disposition);
       });
-      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('did-start-loading', () => {
-        const url = this.$electron.remote.getCurrentWindow()
-          .getBrowserView().webContents.getURL();
-        if (!url || url === 'about:blank' || urlParseLax(this.currentUrl).href === urlParseLax(url).href) return;
-        this.currentUrl = url;
-        this.didStartLoading(url);
+      view.webContents.addListener('did-start-loading', this.didStartLoading);
+      view.webContents.addListener('did-stop-loading', this.didStopLoading);
+      view.webContents.addListener('will-navigate', (e: Event, url: string) => {
+        this.willNavigate(url);
       });
-      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.addListener('did-stop-loading', this.didStopLoading);
     },
     removeListener() {
       const currentWebContents = this.$electron.remote.getCurrentWindow()
@@ -402,22 +386,29 @@ export default {
       currentWebContents.removeListener('did-stop-loading', this.didStopLoading);
       currentWebContents.removeListener('dom-ready', this.domReady);
       currentWebContents.removeListener('ipc-message', this.ipcMessage);
-      currentWebContents.removeListener('did-start-navigation', this.didStartLoading);
+      currentWebContents.removeListener('did-start-loading', this.didStartLoading);
       currentWebContents.removeListener('new-window', this.newWindow);
+      currentWebContents.removeListener('will-navigate', this.willNavigate);
     },
     newWindow(url: string, disposition: string) {
       if (disposition !== 'new-window') {
         this.handleOpenUrl({ url });
       }
     },
-    initialBrowserViewRect() {
-      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].setBounds({
-        x: 0, y: 36, width: this.browsingSize[0], height: this.browsingSize[1] - 36,
-      });
-      this.$electron.remote.getCurrentWindow()
-        .getBrowserViews()[0].setAutoResize({ width: true, height: true });
+    willNavigate(url: string) {
+      if (!url || url === 'about:blank' || urlParseLax(this.currentUrl).href === urlParseLax(url).href) return;
+      this.currentUrl = urlParseLax(url).href;
+      this.startTime = new Date().getTime();
+      this.loadingState = true;
+      this.$electron.ipcRenderer.send('create-browser-view', { url });
+      this.removeListener();
     },
-    didStartLoading(url: string) {
+    didStartLoading() {
+      console.log(123);
+      const url = this.$electron.remote.getCurrentWindow()
+        .getBrowserView().webContents.getURL();
+      if (!url || url === 'about:blank' || urlParseLax(this.currentUrl).href === urlParseLax(url).href) return;
+      this.currentUrl = urlParseLax(url).href;
       this.startTime = new Date().getTime();
       this.loadingState = true;
       this.$electron.ipcRenderer.send('create-browser-view', { url });
@@ -473,9 +464,9 @@ export default {
     domReady() {
       window.focus();
       this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.focus();
-      if (process.env.NODE_ENV === 'development') this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.openDevTools();
     },
     didStopLoading() {
+      console.log('stop');
       const loadingTime: number = new Date().getTime() - this.startTime;
       if (loadingTime % 3000 === 0) {
         this.loadingState = false;
@@ -486,18 +477,20 @@ export default {
       }
     },
     handleOpenUrl({ url }: { url: string }) {
-      if (!url || url === 'about:blank' || url === this.$electron.remote.getCurrentWindow().getBrowserView().webContents.getURL()) return;
-      this.$electron.ipcRenderer.send('create-browser-view', { url });
+      if (!url || url === 'about:blank' || urlParseLax(url).href === urlParseLax(this.currentUrl).href) return;
+      this.loadingState = true;
+      this.currentUrl = urlParseLax(url).href;
+      this.$electron.ipcRenderer.send('create-browser-view', { url: urlParseLax(url).href });
     },
     pipAdapter() {
       const parseUrl = urlParseLax(this.currentPipBrowserView().webContents.getURL());
-      if (parseUrl.host.includes('youtube')) {
+      if (parseUrl.hostname.includes('youtube')) {
         this.pipType = 'youtube';
         this.youtubeAdapter();
-      } else if (parseUrl.host.includes('bilibili')) {
+      } else if (parseUrl.hostname.includes('bilibili')) {
         this.pipType = 'bilibili';
         this.bilibiliAdapter();
-      } else if (parseUrl.host.includes('iqiyi')) {
+      } else if (parseUrl.hostname.includes('iqiyi')) {
         this.pipType = 'iqiyi';
         this.iqiyiAdapter();
       } else {
@@ -506,21 +499,14 @@ export default {
       }
     },
     currentPipBrowserView() {
-      const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserViews()[0];
-      return this.$electron.remote.BrowserView
-        .fromId(this.browserIds.find((id: number) => id !== currentBrowserView.id));
+      return this.$electron.remote.getCurrentWindow().getBrowserView();
     },
     handleWindowChangeEnterPip() {
-      const currentBrowserView = this.$electron.remote.getCurrentWindow().getBrowserViews()[0];
       const newDisplayId = this.$electron.remote.screen
         .getDisplayNearestPoint({ x: this.winPos[0], y: this.winPos[1] }).id;
       const useDefaultPosition = !this.pipPos.length
         || (this.oldDisplayId !== newDisplayId && this.oldDisplayId !== -1);
       this.oldDisplayId = newDisplayId;
-      currentBrowserView.setBounds({
-        x: 0, y: 36, width: this.winSize[0], height: this.winSize[1] - 36,
-      });
-      currentBrowserView.setAutoResize({ width: true, height: true });
       this.currentPipBrowserView().webContents
         .executeJavaScript(this.getVideoStyle, (result: CSSStyleDeclaration) => {
           const videoAspectRatio = parseFloat(result.width as string)
@@ -547,19 +533,11 @@ export default {
             width: 50,
             height: 104,
           });
-          this.currentPipBrowserView().setBounds({
-            x: 0, y: 0, width: Math.round(calculateSize[0]), height: Math.round(calculateSize[1]),
-          });
         });
     },
     handleWindowChangeExitPip() {
       const newDisplayId = this.$electron.remote.screen
         .getDisplayNearestPoint({ x: this.winPos[0], y: this.winPos[1] }).id;
-      this.$electron.remote.getCurrentWindow()
-        .getBrowserViews()[0].setAutoResize({ width: false, height: false });
-      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].setBounds({
-        x: 0, y: 36, width: this.winSize[0], height: this.winSize[1] - 36,
-      });
       // if (this.oldDisplayId !== newDisplayId) {
       //   windowRectService.calculateWindowRect(
       //     this.browsingSize,
@@ -573,8 +551,6 @@ export default {
       this.oldDisplayId = newDisplayId;
       // this.$electron.ipcRenderer.send('callMainWindowMethod', 'setAspectRatio', [0]);
       // this.$electron.ipcRenderer.send('callMainWindowMethod', 'setMinimumSize', [570, 375]);
-      this.$electron.remote.getCurrentWindow()
-        .getBrowserViews()[0].setAutoResize({ width: true, height: true });
     },
     handleDanmuDisplay() {
       if (this.pipType === 'iqiyi') {
@@ -587,11 +563,13 @@ export default {
     },
     handleUrlForward() {
       if (this.canGoForward) {
+        this.removeListener();
         this.$electron.ipcRenderer.send('go-to-offset', 1);
       }
     },
     handleUrlBack() {
       if (this.canGoBack) {
+        this.removeListener();
         this.$electron.ipcRenderer.send('go-to-offset', -1);
       }
     },
@@ -603,21 +581,10 @@ export default {
         this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.reload();
       }
     },
-    shiftPipOperation() {
-      this.$electron.ipcRenderer.send('shift-pip');
-      this.$store.dispatch('updateBrowsingSize', this.winSize);
-      this.$store.dispatch('updateBrowsingPos', this.winPos);
-      this.pipAdapter();
-      const opacity = ['youtube', 'others'].includes(this.pipType) || (this.pipType === 'bilibili' && this.bilibiliType === 'others') ? 0.2 : 1;
-      this.$electron.ipcRenderer.send('init-danmu-state', { opacity, barrageOpen: opacity === 1 ? this.barrageOpen : false });
-    },
     enterPipOperation() {
-      this.$electron.ipcRenderer.send('enter-pip');
       this.$store.dispatch('updateBrowsingSize', this.winSize);
       this.$store.dispatch('updateBrowsingPos', this.winPos);
       this.pipAdapter();
-      const opacity = ['youtube', 'others'].includes(this.pipType) || (this.pipType === 'bilibili' && this.bilibiliType === 'others') ? 0.2 : 1;
-      this.$electron.ipcRenderer.send('init-danmu-state', { opacity, barrageOpen: opacity === 1 ? this.barrageOpen : false });
     },
     exitPipOperation() {
       this.$electron.ipcRenderer.send('exit-pip');
@@ -635,15 +602,11 @@ export default {
     },
     handleEnterPip() {
       if (this.hasVideo) {
+        this.adaptFinished = false;
         const loadUrl = this.$electron.remote.getCurrentWindow()
           .getBrowserViews()[0].webContents.getURL();
         const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
-        if (this.isPip) {
-          this.shiftPipOperation();
-        } else {
-          this.updateIsPip(true);
-          this.enterPipOperation();
-        }
+        this.enterPipOperation();
         this.updatePipState(false);
         this.$refs.browsingHeader.updateWebInfo({
           hasVideo: false,
@@ -651,10 +614,6 @@ export default {
         this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
           .executeJavaScript(this.calculateVideoNum, (r: number) => {
             this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
-            this.updatePipState(this.hasVideo);
-            this.$refs.browsingHeader.updateWebInfo({
-              hasVideo: this.hasVideo,
-            });
           });
       }
     },
@@ -662,14 +621,24 @@ export default {
       if (this.isPip) {
         this.exitPipOperation();
         this.updateIsPip(false);
+        const loadUrl = this.$electron.remote.getCurrentWindow()
+          .getBrowserViews()[0].webContents.getURL();
+        const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
+        this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
+          .executeJavaScript(this.calculateVideoNum, (r: number) => {
+            this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
+          });
       }
     },
     othersAdapter() {
       this.handleWindowChangeEnterPip();
-      this.currentPipBrowserView().webContents.executeJavaScript(this.othersPip.adapter);
+      this.currentPipBrowserView().webContents.executeJavaScript(this.othersPip.adapter)
+        .then(() => {
+          this.adaptFinished = true;
+        });
     },
     othersWatcher() {
-      this.currentPipBrowserView().webContents.executeJavaScript(this.othersPip.watcher);
+      this.$electron.ipcRenderer.send('pip-watcher', this.othersPip.watcher);
     },
     othersRecover() {
       this.$electron.remote.getCurrentWindow()
@@ -677,10 +646,12 @@ export default {
     },
     iqiyiAdapter() {
       this.handleWindowChangeEnterPip();
-      this.currentPipBrowserView().webContents.executeJavaScript(this.iqiyiPip.adapter);
+      this.currentPipBrowserView().webContents.executeJavaScript(this.iqiyiPip.adapter).then(() => {
+        this.adaptFinished = true;
+      });
     },
     iqiyiWatcher() {
-      this.currentPipBrowserView().webContents.executeJavaScript(this.iqiyiPip.watcher);
+      this.$electron.ipcRenderer.send('pip-watcher', this.iqiyiPip.watcher);
     },
     iqiyiRecover() {
       this.$electron.remote.getCurrentWindow()
@@ -688,7 +659,9 @@ export default {
     },
     youtubeAdapter() {
       this.handleWindowChangeEnterPip();
-      this.currentPipBrowserView().webContents.executeJavaScript(youtube.adapter);
+      this.currentPipBrowserView().webContents.executeJavaScript(youtube.adapter).then(() => {
+        this.adaptFinished = true;
+      });
     },
     youtubeRecover() {
       this.$electron.remote.getCurrentWindow()
@@ -701,10 +674,12 @@ export default {
         }).then(() => {
           this.handleWindowChangeEnterPip();
           this.currentPipBrowserView().webContents.executeJavaScript(this.bilibiliPip.adapter);
+        }).then(() => {
+          this.adaptFinished = true;
         });
     },
     bilibiliWatcher() {
-      this.currentPipBrowserView().webContents.executeJavaScript(this.bilibiliPip.watcher);
+      this.$electron.ipcRenderer.send('pip-watcher', this.bilibiliPip.watcher);
     },
     bilibiliRecover() {
       this.$electron.remote.getCurrentWindow()
diff --git a/src/renderer/components/BrowsingView/BrowsingHeader.vue b/src/renderer/components/BrowsingView/BrowsingHeader.vue
index fdd396387e..a4290fdaaa 100644
--- a/src/renderer/components/BrowsingView/BrowsingHeader.vue
+++ b/src/renderer/components/BrowsingView/BrowsingHeader.vue
@@ -119,6 +119,16 @@ export default {
       this.forwardType = val ? 'forward' : 'forwardDisabled';
     },
   },
+  mounted() {
+    this.$bus.$on('update-web-info', (info: {
+      hasVideo?: boolean, url?: string, canGoBack?: boolean, canGoForward?: boolean
+    }) => {
+      const keys = Object.keys(info);
+      keys.forEach((key: string) => {
+        this[key] = info[key];
+      });
+    });
+  },
   methods: {
     handleDbClick() {
       if (!this.isMaximized) {
diff --git a/static/pip/preload.js b/static/pip/preload.js
index 90897f5ace..379f83620f 100644
--- a/static/pip/preload.js
+++ b/static/pip/preload.js
@@ -41,12 +41,13 @@ document.addEventListener('DOMContentLoaded', () => {
       sendToHost('pip', 'pip');
     });
   }
-  window.addEventListener('mouseleave', (evt) => {
-    if (!pipBtns) {
+  window.addEventListener('mouseout', (evt) => {
+    if (!pipBtns && remote.getCurrentWindow()
+      && remote.getCurrentWindow().getBrowserViews().length > 1) {
       const winSize = remote.getCurrentWindow().getSize();
       if (evt.pageX <= 0 || evt.pageY <= 0
         || evt.pageX >= winSize[0] || evt.pageY >= winSize[1]) {
-        sendToHost('mouseleave', 'leave');
+        sendToHost('mouseout', 'out');
       }
     }
   }, true);
@@ -77,7 +78,8 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
   window.addEventListener('mousemove', (evt) => {
-    if (!pipBtns && remote.getCurrentWindow().getBrowserViews().length > 1) {
+    if (!pipBtns && remote.getCurrentWindow()
+      && remote.getCurrentWindow().getBrowserViews().length > 1) {
       if (pipTimer) clearTimeout(pipTimer);
       sendToHost('mousemove', 'isMoving');
     }

From 4f700d762d6c1b90a53508b877f40a7c9815cce5 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Tue, 27 Aug 2019 17:19:18 +0800
Subject: [PATCH 022/123] feat(browsingview): pause video when change page or
 tab

---
 src/main/helpers/BrowserViewManager.ts   |  49 +++++++--
 src/main/index.js                        |  55 +++++-----
 src/renderer/components/BrowsingView.vue | 125 +++++++++++------------
 src/renderer/containers/LandingView.vue  |   3 +-
 src/renderer/main.ts                     |  28 ++---
 src/shared/pip/bilibili.js               |  13 +++
 6 files changed, 152 insertions(+), 121 deletions(-)

diff --git a/src/main/helpers/BrowserViewManager.ts b/src/main/helpers/BrowserViewManager.ts
index 6cd57d3822..be93af7137 100644
--- a/src/main/helpers/BrowserViewManager.ts
+++ b/src/main/helpers/BrowserViewManager.ts
@@ -1,4 +1,5 @@
 import { BrowserView } from 'electron';
+import { bilibiliVideoPause, bilibiliFindType } from '../../shared/pip/bilibili';
 
 type ChannelData = {
   currentIndex: number,
@@ -19,7 +20,7 @@ export class BrowserViewManager implements IBrowserViewManager {
   private currentPip: {
     pipIndex: number,
     pipChannel: string,
-    pipPage: BrowserViewHistory,
+    pipPage: BrowserViewHistory | null,
   };
 
   public constructor() {
@@ -27,10 +28,7 @@ export class BrowserViewManager implements IBrowserViewManager {
     this.currentPip = {
       pipIndex: -1,
       pipChannel: '',
-      pipPage: {
-        url: '',
-        view: new BrowserView(),
-      },
+      pipPage: null,
     };
   }
 
@@ -58,6 +56,18 @@ export class BrowserViewManager implements IBrowserViewManager {
     // last view go back
     if (lastPage) {
       lastPage.view.webContents.loadURL(lastPage.url);
+      lastPage.view.webContents.once('media-started-playing', () => {
+        if (this.currentChannel.includes('bilibili')) {
+          let type = '';
+          lastPage.view.webContents
+            .executeJavaScript(bilibiliFindType).then((r: (HTMLElement | null)[]) => {
+              type = ['bangumi', 'videoStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
+              lastPage.view.webContents.executeJavaScript(bilibiliVideoPause(type));
+            });
+        } else {
+          lastPage.view.webContents.executeJavaScript('setTimeout(() => { document.querySelector("video").pause(); }, 100)');
+        }
+      });
     }
 
     this.history[channel].list.push(page);
@@ -83,6 +93,7 @@ export class BrowserViewManager implements IBrowserViewManager {
     if (!this.history[channel]) {
       return this.create(channel, url);
     }
+    this.pauseVideo();
     this.currentChannel = channel;
     this.history[channel].lastUpdateTime = Date.now();
     return {
@@ -141,21 +152,36 @@ export class BrowserViewManager implements IBrowserViewManager {
   public changePip(channel: string): { pipBrowser: Electron.BrowserView;
     mainBrowser: BrowserViewData } {
     this.currentChannel = channel;
-    // TODO clear last pip browserView
+    this.pauseVideo((this.currentPip.pipPage as BrowserViewHistory).view);
     return this.enterPip();
   }
 
+  public pauseVideo(view?: BrowserView): void {
+    const currentIndex = this.history[this.currentChannel].currentIndex;
+    const currentView = view || this.history[this.currentChannel].list[currentIndex].view;
+    if (currentView.webContents.isCurrentlyAudible()) {
+      if (this.currentChannel.includes('bilibili')) {
+        let type = '';
+        currentView.webContents
+          .executeJavaScript(bilibiliFindType).then((r: (HTMLElement | null)[]) => {
+            type = ['bangumi', 'videoStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
+            currentView.webContents.executeJavaScript(bilibiliVideoPause(type));
+          });
+      } else {
+        currentView.webContents.executeJavaScript('setTimeout(() => { document.querySelector("video").pause(); }, 100)');
+      }
+    }
+  }
+
   public pipClose(): void {
-    this.currentPip.pipPage.view.destroy();
+    if (this.currentPip.pipPage) this.currentPip.pipPage.view.destroy();
     this.currentPip.pipIndex = -1;
     this.currentPip.pipChannel = '';
-    this.currentPip.pipPage = {
-      url: '',
-      view: new BrowserView(),
-    };
+    this.currentPip.pipPage = null;
   }
 
   private jump(left: boolean): BrowserViewData {
+    this.pauseVideo();
     const channel: ChannelData = this.history[this.currentChannel];
     const result: BrowserViewData = {
       canBack: false,
@@ -192,4 +218,5 @@ export interface IBrowserViewManager {
   exitPip(): BrowserViewData
   changePip(channel: string): { pipBrowser: BrowserView, mainBrowser: BrowserViewData }
   pipClose(): void
+  pauseVideo(): void
 }
diff --git a/src/main/index.js b/src/main/index.js
index a26ec2c7c1..d32d3514c2 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -492,49 +492,55 @@ function registerMainWindowEvent(mainWindow) {
   ipcMain.on('go-to-offset', (evt, val) => {
     if (!browserViewManager) return;
     const newBrowser = val === 1 ? browserViewManager.forward() : browserViewManager.back();
-    mainWindow.removeBrowserView(mainWindow.getBrowserView());
+    const id = mainWindow.getBrowserView().id;
     mainWindow.addBrowserView(newBrowser.page.view);
+    setTimeout(() => {
+      mainWindow.removeBrowserView(BrowserView.fromId(id));
+      mainWindow.send('update-browser-state', {
+        url: newBrowser.page.url,
+        canGoBack: newBrowser.canBack,
+        canGoForward: newBrowser.canForward,
+      });
+    }, 150);
     newBrowser.page.view.setBounds({
       x: 0, y: 36, width: mainWindow.getSize()[0], height: mainWindow.getSize()[1] - 36,
     });
     newBrowser.page.view.setAutoResize({
       width: true, height: true,
     });
-    mainWindow.send('update-browser-state', {
-      url: newBrowser.page.url,
-      canGoBack: newBrowser.canBack,
-      canGoForward: newBrowser.canForward,
-    });
   });
   ipcMain.on('change-channel', (evt, args) => {
-    if (!browserViewManager) return;
-    const newChannel = browserViewManager.changeChanel(args.channel, args.url);
+    if (!browserViewManager) browserViewManager = new BrowserViewManager();
+    const channel = urlParse(args.url).hostname.includes('bilibili') ? 'www.bilibili.com' : urlParse(args.url).hostname;
+    const newChannel = browserViewManager.changeChanel(channel, args.url);
     const view = newChannel.view ? newChannel.view : newChannel.page.view;
     const url = newChannel.view ? args.url : newChannel.page.url;
-    mainWindow.removeBrowserView(mainWindow.getBrowserView());
+    const mainBrowser = mainWindow.getBrowserView();
     mainWindow.addBrowserView(view);
+    setTimeout(() => {
+      if (mainBrowser) mainWindow.removeBrowserView(BrowserView.fromId(mainBrowser.id));
+      mainWindow.send('update-browser-state', {
+        url,
+        canGoBack: newChannel.canBack,
+        canGoForward: newChannel.canForward,
+      });
+    }, mainBrowser ? 150 : 0);
     view.setBounds({
       x: 0, y: 36, width: mainWindow.getSize()[0], height: mainWindow.getSize()[1] - 36,
     });
     view.setAutoResize({
       width: true, height: true,
     });
-    mainWindow.send('update-browser-state', {
-      url,
-      canGoBack: newChannel.canBack,
-      canGoForward: newChannel.canForward,
-    });
   });
   ipcMain.on('create-browser-view', (evt, args) => {
     if (!browserViewManager) browserViewManager = new BrowserViewManager();
+    const channel = urlParse(args.url).hostname.includes('bilibili') ? 'www.bilibili.com' : urlParse(args.url).hostname;
     const currentMainBrowserView = browserViewManager
-      .create(urlParse(args.url).hostname, args.url);
-    const isMainBrowser = mainWindow.getBrowserView();
-    if (isMainBrowser) {
-      mainWindow.removeBrowserView(mainWindow.getBrowserViews()[0]);
-      mainWindow.addBrowserView(currentMainBrowserView.view); // TODO need to pause video
-    } else {
-      mainWindow.addBrowserView(currentMainBrowserView.view);
+      .create(channel, args.url);
+    const mainBrowser = mainWindow.getBrowserView();
+    mainWindow.addBrowserView(currentMainBrowserView.view);
+    if (mainBrowser) {
+      mainWindow.removeBrowserView(BrowserView.fromId(mainBrowser.id));
     }
     currentMainBrowserView.view.setBounds({
       x: 0, y: 36, width: mainWindow.getSize()[0], height: mainWindow.getSize()[1] - 36,
@@ -660,15 +666,13 @@ function registerMainWindowEvent(mainWindow) {
     browViews.forEach((view) => {
       browsingWindow.removeBrowserView(view);
     });
-    createPipControlView();
-    createTitlebarView();
     const browsers = browserViewManager.changePip(urlParse(mainView.webContents.getURL()).hostname);
     const pipBrowser = browsers.pipBrowser;
     const mainBrowser = browsers.mainBrowser;
     mainWindow.addBrowserView(mainBrowser.page.view);
     browsingWindow.addBrowserView(pipBrowser);
-    browsingWindow.addBrowserView(pipControlView);
-    browsingWindow.addBrowserView(titlebarView);
+    createPipControlView();
+    createTitlebarView();
     pipBrowser.setBounds({
       x: 0, y: 0, width: browsingWindow.getSize()[0], height: browsingWindow.getSize()[1],
     });
@@ -710,7 +714,6 @@ function registerMainWindowEvent(mainWindow) {
       createTitlebarView();
       browsingWindow.show();
     }
-    pipBrowser.webContents.openDevTools();
     mainBrowser.page.view.setBounds({
       x: 0, y: 36, width: mainWindow.getSize()[0], height: mainWindow.getSize()[1] - 36,
     });
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 09bd1a773e..b14cfdfe88 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -222,47 +222,10 @@ export default {
         }
       }, 0);
     });
-    window.addEventListener('focus', () => {
-      this.menuService.updateFocusedWindow(true);
-      this.updateCanGoBack(this.$electron.remote.getCurrentWindow()
-        .getBrowserViews()[0].webContents.canGoBack());
-      this.updateCanGoForward(this.$electron.remote.getCurrentWindow()
-        .getBrowserViews()[0].webContents.canGoForward());
-      this.updateReload(true);
-      const loadUrl = this.$electron.remote.getCurrentWindow()
-        .getBrowserViews()[0].webContents.getURL();
-      const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
-      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
-        .executeJavaScript(this.calculateVideoNum, (r: number) => {
-          this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
-        });
-    });
-    window.addEventListener('beforeunload', (e: BeforeUnloadEvent) => {
-      this.$electron.ipcRenderer.send('remove-browser');
-      this.removeListener();
-      if (!this.asyncTasksDone) {
-        e.returnValue = false;
-        if (this.isPip) {
-          this.$electron.ipcRenderer.send('store-pip-pos');
-        } else {
-          this.$store.dispatch('updateBrowsingSize', this.winSize);
-          this.$store.dispatch('updateBrowsingPos', this.winPos);
-        }
-        asyncStorage.set('browsing', {
-          pipSize: this.pipSize,
-          pipPos: this.pipPos,
-          browsingSize: this.browsingSize,
-          browsingPos: this.browsingPos,
-          barrageOpen: this.barrageOpen,
-        }).finally(() => {
-          this.asyncTasksDone = true;
-          window.close();
-        });
-      } else if (this.quit) {
-        this.$electron.remote.app.quit();
-      }
-    });
+    window.addEventListener('focus', this.focusHandler);
+    window.addEventListener('beforeunload', this.beforeUnloadHandler);
     this.$bus.$on('back-to-landingview', () => {
+      this.removeListener();
       this.backToLandingView = true;
       this.$bus.$off();
       this.$router.push({
@@ -292,6 +255,7 @@ export default {
     });
     this.$electron.ipcRenderer.on('update-browser-state', (e: Event, state: { url: string, canGoBack: boolean, canGoForward: boolean }) => {
       this.currentUrl = state.url;
+      this.removeListener();
       this.addListenerToBrowser();
       this.canGoBack = state.canGoBack;
       this.canGoForward = state.canGoForward;
@@ -307,9 +271,9 @@ export default {
         canGoForward: state.canGoForward,
       });
     });
-    this.addListenerToBrowser();
   },
   beforeDestroy() {
+    this.removeListener();
     asyncStorage.set('browsing', {
       pipSize: this.pipSize,
       pipPos: this.pipPos,
@@ -325,6 +289,8 @@ export default {
       }
       this.updateIsPip(false);
     }).finally(() => {
+      window.removeEventListener('beforeunload', this.beforeUnloadHandler);
+      window.removeEventListener('focus', this.focusHandler);
       if (this.backToLandingView) {
         this.$electron.ipcRenderer.send('remove-browser');
         windowRectService.uploadWindowBy(false, 'landing-view');
@@ -337,6 +303,46 @@ export default {
       updateBarrageOpen: browsingActions.UPDATE_BARRAGE_OPEN,
       updateIsPip: browsingActions.UPDATE_IS_PIP,
     }),
+    focusHandler() {
+      this.menuService.updateFocusedWindow(true);
+      this.updateCanGoBack(this.$electron.remote.getCurrentWindow()
+        .getBrowserViews()[0].webContents.canGoBack());
+      this.updateCanGoForward(this.$electron.remote.getCurrentWindow()
+        .getBrowserViews()[0].webContents.canGoForward());
+      this.updateReload(true);
+      const loadUrl = this.$electron.remote.getCurrentWindow()
+        .getBrowserViews()[0].webContents.getURL();
+      const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
+      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
+        .executeJavaScript(this.calculateVideoNum, (r: number) => {
+          this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
+        });
+    },
+    beforeUnloadHandler(e: BeforeUnloadEvent) {
+      this.removeListener();
+      this.$electron.ipcRenderer.send('remove-browser');
+      if (!this.asyncTasksDone) {
+        e.returnValue = false;
+        if (this.isPip) {
+          this.$electron.ipcRenderer.send('store-pip-pos');
+        } else {
+          this.$store.dispatch('updateBrowsingSize', this.winSize);
+          this.$store.dispatch('updateBrowsingPos', this.winPos);
+        }
+        asyncStorage.set('browsing', {
+          pipSize: this.pipSize,
+          pipPos: this.pipPos,
+          browsingSize: this.browsingSize,
+          browsingPos: this.browsingPos,
+          barrageOpen: this.barrageOpen,
+        }).finally(() => {
+          this.asyncTasksDone = true;
+          window.close();
+        });
+      } else if (this.quit) {
+        this.$electron.remote.app.quit();
+      }
+    },
     updateReload(val: boolean) {
       if (this.$electron.remote.getCurrentWindow().isFocused()) {
         this.$electron.ipcRenderer.send('update-enabled', 'history.reload', val);
@@ -361,7 +367,7 @@ export default {
       if (urlParseLax(this.currentUrl).hostname !== urlParseLax(url).hostname) {
         this.removeListener();
         this.hasVideo = false;
-        this.$electron.ipcRenderer.send('change-channel', { url, channel: urlParseLax(url).hostname });
+        this.$electron.ipcRenderer.send('change-channel', { url });
       }
     },
     addListenerToBrowser() {
@@ -381,14 +387,16 @@ export default {
       });
     },
     removeListener() {
-      const currentWebContents = this.$electron.remote.getCurrentWindow()
-        .getBrowserViews()[0].webContents;
-      currentWebContents.removeListener('did-stop-loading', this.didStopLoading);
-      currentWebContents.removeListener('dom-ready', this.domReady);
-      currentWebContents.removeListener('ipc-message', this.ipcMessage);
-      currentWebContents.removeListener('did-start-loading', this.didStartLoading);
-      currentWebContents.removeListener('new-window', this.newWindow);
-      currentWebContents.removeListener('will-navigate', this.willNavigate);
+      const currentBrowserViews = this.$electron.remote.getCurrentWindow().getBrowserViews();
+      if (currentBrowserViews.length) {
+        const currentWebContents = currentBrowserViews[0].webContents;
+        currentWebContents.removeListener('did-stop-loading', this.didStopLoading);
+        currentWebContents.removeListener('dom-ready', this.domReady);
+        currentWebContents.removeListener('ipc-message', this.ipcMessage);
+        currentWebContents.removeListener('did-start-loading', this.didStartLoading);
+        currentWebContents.removeListener('new-window', this.newWindow);
+        currentWebContents.removeListener('will-navigate', this.willNavigate);
+      }
     },
     newWindow(url: string, disposition: string) {
       if (disposition !== 'new-window') {
@@ -404,7 +412,6 @@ export default {
       this.removeListener();
     },
     didStartLoading() {
-      console.log(123);
       const url = this.$electron.remote.getCurrentWindow()
         .getBrowserView().webContents.getURL();
       if (!url || url === 'about:blank' || urlParseLax(this.currentUrl).href === urlParseLax(url).href) return;
@@ -466,7 +473,6 @@ export default {
       this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.focus();
     },
     didStopLoading() {
-      console.log('stop');
       const loadingTime: number = new Date().getTime() - this.startTime;
       if (loadingTime % 3000 === 0) {
         this.loadingState = false;
@@ -508,7 +514,7 @@ export default {
         || (this.oldDisplayId !== newDisplayId && this.oldDisplayId !== -1);
       this.oldDisplayId = newDisplayId;
       this.currentPipBrowserView().webContents
-        .executeJavaScript(this.getVideoStyle, (result: CSSStyleDeclaration) => {
+        .executeJavaScript(this.getVideoStyle).then((result: CSSStyleDeclaration) => {
           const videoAspectRatio = parseFloat(result.width as string)
             / parseFloat(result.height as string);
           this.$electron.ipcRenderer.send('callBrowsingWindowMethod', 'setAspectRatio', [videoAspectRatio]);
@@ -602,19 +608,10 @@ export default {
     },
     handleEnterPip() {
       if (this.hasVideo) {
+        this.hasVideo = false;
         this.adaptFinished = false;
-        const loadUrl = this.$electron.remote.getCurrentWindow()
-          .getBrowserViews()[0].webContents.getURL();
-        const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
         this.enterPipOperation();
         this.updatePipState(false);
-        this.$refs.browsingHeader.updateWebInfo({
-          hasVideo: false,
-        });
-        this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
-          .executeJavaScript(this.calculateVideoNum, (r: number) => {
-            this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
-          });
       }
     },
     handleExitPip() {
@@ -669,7 +666,7 @@ export default {
     },
     bilibiliAdapter() {
       this.currentPipBrowserView().webContents
-        .executeJavaScript(bilibiliFindType, (r: (HTMLElement | null)[]) => {
+        .executeJavaScript(bilibiliFindType).then((r: (HTMLElement | null)[]) => {
           this.bilibiliType = ['bangumi', 'videoStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
         }).then(() => {
           this.handleWindowChangeEnterPip();
diff --git a/src/renderer/containers/LandingView.vue b/src/renderer/containers/LandingView.vue
index 0a881fef1c..3a3b74c6ba 100644
--- a/src/renderer/containers/LandingView.vue
+++ b/src/renderer/containers/LandingView.vue
@@ -377,7 +377,8 @@ export default {
     },
     handleSidebarIcon(site: string) {
       this.$electron.ipcRenderer.send('add-browsing');
-      this.$electron.ipcRenderer.send('create-browser-view', { url: `https://www.${site}.com` });
+      const url = `https://www.${site}.com`;
+      this.$electron.ipcRenderer.send('change-channel', { url });
       this.$router.push({
         name: 'browsing-view',
       });
diff --git a/src/renderer/main.ts b/src/renderer/main.ts
index 917fd22c85..38c67bbd9f 100644
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@@ -729,25 +729,15 @@ new Vue({
         this.$bus.$emit('clean-landingViewItems');
         this.refreshMenu();
       });
-      this.menuService.on('favourite.iqiyi', () => {
-        this.$electron.ipcRenderer.send('add-browsing');
-        this.$electron.ipcRenderer.send('create-browser-view', { url: 'https://www.iqiyi.com' });
-        this.$router.push({
-          name: 'browsing-view',
-        });
-      });
-      this.menuService.on('favourite.bilibili', () => {
-        this.$electron.ipcRenderer.send('add-browsing');
-        this.$electron.ipcRenderer.send('create-browser-view', { url: 'https://www.bilibili.com' });
-        this.$router.push({
-          name: 'browsing-view',
-        });
-      });
-      this.menuService.on('favourite.youtube', () => {
-        this.$electron.ipcRenderer.send('add-browsing');
-        this.$electron.ipcRenderer.send('create-browser-view', { url: 'https://www.youtube.com' });
-        this.$router.push({
-          name: 'browsing-view',
+      const urls = ['https://www.iqiyi.com', 'https://www.bilibili.com', 'https://www.youtube.com'];
+      const channels = ['iqiyi', 'bilibili', 'youtube'];
+      channels.forEach((channel: string, index: number) => {
+        this.menuService.on(`favourite.${channel}`, () => {
+          this.$electron.ipcRenderer.send('add-browsing');
+          this.$electron.ipcRenderer.send('change-channel', { url: urls[index] });
+          this.$router.push({
+            name: 'browsing-view',
+          });
         });
       });
       this.menuService.on('history.reload', () => {
diff --git a/src/shared/pip/bilibili.js b/src/shared/pip/bilibili.js
index 1403264d2f..b8661c5a9b 100644
--- a/src/shared/pip/bilibili.js
+++ b/src/shared/pip/bilibili.js
@@ -11,6 +11,19 @@ export function bilibiliBarrageAdapt(type, barrageOpen) {
   return '';
 }
 
+export function bilibiliVideoPause(type) {
+  if (['video', 'bangumi'].includes(type)) {
+    return 'document.querySelector(".bilibili-player-video-btn").click()';
+  }
+  if (type === 'videoStreaming') {
+    return 'document.querySelector(".bilibili-live-player-video-controller-btn-item").children[0].click()';
+  }
+  if (type === 'iframeStreaming') {
+    return 'document.querySelector("iframe").contentDocument.querySelector(".bilibili-live-player-video-controller-btn-item").children[0].click()';
+  }
+  return 'document.querySelector(".bilibili-live-player-video-controller-btn-item").children[0].click()';
+}
+
 export function bilibili(type, barrageOpen, winSize) {
   if (type === 'bangumi') {
     return {

From be7814b0ce8a2def6e58ddd9dc72bfc0ed56bb1d Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Wed, 28 Aug 2019 15:38:15 +0800
Subject: [PATCH 023/123] fix(browsingview): fix not pause video in some cases

---
 src/main/helpers/BrowserViewManager.ts   | 55 +++++++++++--------
 src/main/index.js                        | 33 ++++++------
 src/renderer/components/BrowsingPip.vue  | 21 ++++++--
 src/renderer/components/BrowsingView.vue | 69 +++++++-----------------
 src/renderer/containers/LandingView.vue  |  9 +++-
 src/renderer/main.ts                     |  6 ++-
 6 files changed, 95 insertions(+), 98 deletions(-)

diff --git a/src/main/helpers/BrowserViewManager.ts b/src/main/helpers/BrowserViewManager.ts
index be93af7137..7380163fce 100644
--- a/src/main/helpers/BrowserViewManager.ts
+++ b/src/main/helpers/BrowserViewManager.ts
@@ -41,6 +41,33 @@ export class BrowserViewManager implements IBrowserViewManager {
         list: [],
       };
     }
+
+    // 暂停当前视频
+    if (this.currentChannel) {
+      const currentIndex = this.history[this.currentChannel].currentIndex;
+      if (channel !== this.currentChannel) {
+        const view = this.history[this.currentChannel].list[currentIndex].view;
+        this.pauseVideo(view);
+      } else {
+        const lastPage = this.history[channel].list[currentIndex];
+        if (lastPage) {
+          lastPage.view.webContents.loadURL(lastPage.url);
+          lastPage.view.webContents.once('media-started-playing', () => {
+            if (this.currentChannel.includes('bilibili')) {
+              let type = '';
+              lastPage.view.webContents
+                .executeJavaScript(bilibiliFindType).then((r: (HTMLElement | null)[]) => {
+                  type = ['bangumi', 'videoStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
+                  console.log(type);
+                  lastPage.view.webContents.executeJavaScript(bilibiliVideoPause(type));
+                });
+            } else {
+              lastPage.view.webContents.executeJavaScript('setTimeout(() => { document.querySelector("video").pause(); }, 100)');
+            }
+          });
+        }
+      }
+    }
     // 创建当前view数据
     const page = {
       url,
@@ -52,23 +79,6 @@ export class BrowserViewManager implements IBrowserViewManager {
     };
     // loadURL
     page.view.webContents.loadURL(page.url);
-    const lastPage = this.history[channel].list[this.history[channel].list.length - 1];
-    // last view go back
-    if (lastPage) {
-      lastPage.view.webContents.loadURL(lastPage.url);
-      lastPage.view.webContents.once('media-started-playing', () => {
-        if (this.currentChannel.includes('bilibili')) {
-          let type = '';
-          lastPage.view.webContents
-            .executeJavaScript(bilibiliFindType).then((r: (HTMLElement | null)[]) => {
-              type = ['bangumi', 'videoStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
-              lastPage.view.webContents.executeJavaScript(bilibiliVideoPause(type));
-            });
-        } else {
-          lastPage.view.webContents.executeJavaScript('setTimeout(() => { document.querySelector("video").pause(); }, 100)');
-        }
-      });
-    }
 
     this.history[channel].list.push(page);
     this.history[channel].currentIndex = this.history[channel].list.length - 1;
@@ -123,7 +133,7 @@ export class BrowserViewManager implements IBrowserViewManager {
     return { pipBrowser, mainBrowser };
   }
 
-  public exitPip(): BrowserViewData { // normal exit
+  public exitPip(): BrowserViewData {
     const { pipIndex, pipChannel } = this.currentPip;
     const list = this.history[pipChannel].list;
     this.history[pipChannel].list = list
@@ -136,11 +146,10 @@ export class BrowserViewManager implements IBrowserViewManager {
     this.history[pipChannel].currentIndex = pipIndex;
     this.history[pipChannel].lastUpdateTime = Date.now();
     this.currentChannel = pipChannel;
-    this.currentPip.pipIndex = -1;
-    this.currentPip.pipChannel = '';
-    this.currentPip.pipPage = {
-      url: '',
-      view: new BrowserView(),
+    this.currentPip = {
+      pipIndex: -1,
+      pipChannel: '',
+      pipPage: null,
     };
     return {
       canBack: this.history[this.currentChannel].currentIndex > 0,
diff --git a/src/main/index.js b/src/main/index.js
index d32d3514c2..700bad8806 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -303,7 +303,7 @@ function createAboutWindow() {
   });
 }
 
-function createBrowsingWindow() {
+function createBrowsingWindow(args) {
   const browsingWindowOptions = {
     useContentSize: true,
     frame: false,
@@ -327,7 +327,10 @@ function createBrowsingWindow() {
     });
   }
   browsingWindow.once('ready-to-show', () => {
-    // browsingWindow.show();
+    browsingWindow.setSize(args.size[0], args.size[1]);
+    if (args.position.length) {
+      browsingWindow.setPosition(args.position[0], args.position[1]);
+    }
   });
   browsingWindow.on('leave-full-screen', () => {
     if (hideBrowsingWindow) {
@@ -455,31 +458,23 @@ function registerMainWindowEvent(mainWindow) {
       console.error('callMainWindowMethod', method, JSON.stringify(args), '\n', ex);
     }
   });
-  ipcMain.on('store-pip-pos', () => {
-    if (!browsingWindow.isClosable()) {
-      mainWindow.send('store-pip-pos', browsingWindow.getPosition());
-    }
-  });
-  ipcMain.on('pip-window-size', (evt, size) => {
-    mainWindow.send('pip-window-size', size);
-  });
   ipcMain.on('pip-watcher', (evt, args) => {
     browsingWindow.getBrowserViews()[0].webContents.executeJavaScript(args);
   });
-  ipcMain.on('pip-window-close', () => {
+  ipcMain.on('pip-window-close', (evt, args) => {
     const views = browsingWindow.getBrowserViews();
     if (views.length) {
       views.forEach((view) => {
         browsingWindow.removeBrowserView(view);
       });
       browserViewManager.pipClose();
-      mainWindow.send('update-pip-state');
+      mainWindow.send('update-pip-state', args);
     }
   });
   ipcMain.on('remove-browser', () => {
     const mainView = mainWindow.getBrowserView();
-    // TODO need to pause video
     mainWindow.removeBrowserView(mainView);
+    browserViewManager.pauseVideo();
     if (browsingWindow) {
       const views = browsingWindow.getBrowserViews();
       views.forEach((view) => {
@@ -524,7 +519,7 @@ function registerMainWindowEvent(mainWindow) {
         canGoBack: newChannel.canBack,
         canGoForward: newChannel.canForward,
       });
-    }, mainBrowser ? 150 : 0);
+    }, 150);
     view.setBounds({
       x: 0, y: 36, width: mainWindow.getSize()[0], height: mainWindow.getSize()[1] - 36,
     });
@@ -700,6 +695,9 @@ function registerMainWindowEvent(mainWindow) {
     const mainBrowser = browsers.mainBrowser;
     if (!browsingWindow) {
       createBrowsingWindow();
+      browsingWindow.setSize(args.pipInfo.pipSize[0], args.pipInfo.pipSize[1]);
+      browsingWindow.setPosition(args.pipInfo.pipPos[0], args.pipInfo.pipPos[1]);
+      mainWindow.send('init-pip-position');
       mainWindow.removeBrowserView(mainWindow.getBrowserView());
       mainWindow.addBrowserView(mainBrowser.page.view);
       browsingWindow.addBrowserView(pipBrowser);
@@ -714,6 +712,8 @@ function registerMainWindowEvent(mainWindow) {
       createTitlebarView();
       browsingWindow.show();
     }
+    browsingWindow.setAspectRatio(args.pipInfo.aspectRatio);
+    browsingWindow.setMinimumSize(args.pipInfo.minimumSize[0], args.pipInfo.minimumSize[1]);
     mainBrowser.page.view.setBounds({
       x: 0, y: 36, width: mainWindow.getSize()[0], height: mainWindow.getSize()[1] - 36,
     });
@@ -833,7 +833,9 @@ function registerMainWindowEvent(mainWindow) {
     app.quit();
   });
   ipcMain.on('add-preference', createPreferenceWindow);
-  ipcMain.on('add-browsing', createBrowsingWindow);
+  ipcMain.on('add-browsing', (e, args) => {
+    createBrowsingWindow(args);
+  });
   ipcMain.on('preference-to-main', (e, args) => {
     if (mainWindow && !mainWindow.webContents.isDestroyed()) {
       mainWindow.webContents.send('mainDispatch', 'setPreference', args);
@@ -1142,7 +1144,6 @@ app.on('web-contents-created', (webContentsCreatedEvent, contents) => {
 
 app.on('bossKey', handleBossKey);
 app.on('add-preference', createPreferenceWindow);
-app.on('add-browsing', createBrowsingWindow);
 app.on('add-windows-about', createAboutWindow);
 
 app.on('menu-create-main-window', () => {
diff --git a/src/renderer/components/BrowsingPip.vue b/src/renderer/components/BrowsingPip.vue
index 7314682e4d..1569ebeee2 100644
--- a/src/renderer/components/BrowsingPip.vue
+++ b/src/renderer/components/BrowsingPip.vue
@@ -11,6 +11,7 @@
 import { throttle } from 'lodash';
 import electron from 'electron';
 import MenuService from '@/services/menu/MenuService';
+import asyncStorage from '@/helpers/asyncStorage';
 
 export default {
   name: 'BrowsingPip',
@@ -18,6 +19,7 @@ export default {
     return {
       supportedRecordHost: ['www.youtube.com', 'www.bilibili.com', 'www.iqiyi.com'],
       menuService: null,
+      asyncTasksDone: false,
     };
   },
   computed: {
@@ -35,7 +37,6 @@ export default {
     });
     window.addEventListener('resize', throttle(() => {
       const size = electron.remote.getCurrentWindow().getSize();
-      electron.ipcRenderer.send('pip-window-size', size);
       electron.ipcRenderer.send('set-bounds', {
         titlebar: {
           x: 0,
@@ -51,9 +52,21 @@ export default {
         },
       });
     }, 100));
-    window.addEventListener('beforeunload', () => {
-      electron.ipcRenderer.send('store-pip-pos');
-      electron.ipcRenderer.send('pip-window-close');
+    window.addEventListener('beforeunload', (e) => {
+      if (!this.asyncTasksDone) {
+        e.returnValue = false;
+        const size = electron.remote.getCurrentWindow().getSize();
+        const position = electron.remote.getCurrentWindow().getPosition();
+        asyncStorage.set('browsingPip', {
+          pipSize: size,
+          pipPos: position,
+        }).then(() => {
+          electron.ipcRenderer.send('pip-window-close', { size, position });
+        }).finally(() => {
+          this.asyncTasksDone = true;
+          window.close();
+        });
+      }
     });
   },
 };
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index b14cfdfe88..cbc0236e91 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -86,6 +86,7 @@ export default {
       canGoBack: false,
       canGoForward: false,
       adaptFinished: false,
+      pipInfo: {},
     };
   },
   computed: {
@@ -123,7 +124,7 @@ export default {
     adaptFinished(val: boolean) {
       if (val) {
         const opacity = ['youtube', 'others'].includes(this.pipType) || (this.pipType === 'bilibili' && this.bilibiliType === 'others') ? 0.2 : 1;
-        this.$electron.ipcRenderer.send(this.isPip ? 'shift-pip' : 'enter-pip', { opacity, barrageOpen: opacity === 1 ? this.barrageOpen : false });
+        this.$electron.ipcRenderer.send(this.isPip ? 'shift-pip' : 'enter-pip', { opacity, barrageOpen: opacity === 1 ? this.barrageOpen : false, pipInfo: this.pipInfo });
         this.updateIsPip(true);
       }
     },
@@ -238,19 +239,15 @@ export default {
     this.$electron.ipcRenderer.on('handle-danmu-display', () => {
       this.handleDanmuDisplay();
     });
-    this.$electron.ipcRenderer.on('store-pip-pos', (e: Event, pos: number[]) => {
-      this.$store.dispatch('updatePipPos', pos);
-    });
-    this.$electron.ipcRenderer.on('pip-window-size', (e: Event, size: number[]) => {
-      this.$store.dispatch('updatePipSize', size);
-    });
     this.$electron.ipcRenderer.on('quit', () => {
       this.quit = true;
     });
-    this.$electron.ipcRenderer.on('update-header-to-show', (ev: Event, headerToShow: boolean) => {
+    this.$electron.ipcRenderer.on('update-header-to-show', (e: Event, headerToShow: boolean) => {
       this.headerToShow = headerToShow;
     });
-    this.$electron.ipcRenderer.on('update-pip-state', () => {
+    this.$electron.ipcRenderer.on('update-pip-state', (e: Event, info: { size: number[], position: number[] }) => {
+      this.$store.dispatch('updatePipPos', info.position);
+      this.$store.dispatch('updatePipSize', info.size);
       this.updateIsPip(false);
     });
     this.$electron.ipcRenderer.on('update-browser-state', (e: Event, state: { url: string, canGoBack: boolean, canGoForward: boolean }) => {
@@ -274,20 +271,13 @@ export default {
   },
   beforeDestroy() {
     this.removeListener();
+    this.$store.dispatch('updateBrowsingSize', this.winSize);
+    this.$store.dispatch('updateBrowsingPos', this.winPos);
+    this.updateIsPip(false);
     asyncStorage.set('browsing', {
-      pipSize: this.pipSize,
-      pipPos: this.pipPos,
       browsingSize: this.browsingSize,
       browsingPos: this.browsingPos,
       barrageOpen: this.barrageOpen,
-    }).then(() => {
-      if (this.isPip) {
-        this.$electron.ipcRenderer.send('store-pip-pos');
-      } else {
-        this.$store.dispatch('updateBrowsingSize', this.winSize);
-        this.$store.dispatch('updateBrowsingPos', this.winPos);
-      }
-      this.updateIsPip(false);
     }).finally(() => {
       window.removeEventListener('beforeunload', this.beforeUnloadHandler);
       window.removeEventListener('focus', this.focusHandler);
@@ -305,6 +295,7 @@ export default {
     }),
     focusHandler() {
       this.menuService.updateFocusedWindow(true);
+      this.updatePipState(this.hasVideo);
       this.updateCanGoBack(this.$electron.remote.getCurrentWindow()
         .getBrowserViews()[0].webContents.canGoBack());
       this.updateCanGoForward(this.$electron.remote.getCurrentWindow()
@@ -323,15 +314,9 @@ export default {
       this.$electron.ipcRenderer.send('remove-browser');
       if (!this.asyncTasksDone) {
         e.returnValue = false;
-        if (this.isPip) {
-          this.$electron.ipcRenderer.send('store-pip-pos');
-        } else {
-          this.$store.dispatch('updateBrowsingSize', this.winSize);
-          this.$store.dispatch('updateBrowsingPos', this.winPos);
-        }
+        this.$store.dispatch('updateBrowsingSize', this.winSize);
+        this.$store.dispatch('updateBrowsingPos', this.winPos);
         asyncStorage.set('browsing', {
-          pipSize: this.pipSize,
-          pipPos: this.pipPos,
           browsingSize: this.browsingSize,
           browsingPos: this.browsingPos,
           barrageOpen: this.barrageOpen,
@@ -517,8 +502,6 @@ export default {
         .executeJavaScript(this.getVideoStyle).then((result: CSSStyleDeclaration) => {
           const videoAspectRatio = parseFloat(result.width as string)
             / parseFloat(result.height as string);
-          this.$electron.ipcRenderer.send('callBrowsingWindowMethod', 'setAspectRatio', [videoAspectRatio]);
-          this.$electron.ipcRenderer.send('callBrowsingWindowMethod', 'setMinimumSize', [420, Math.round(420 / videoAspectRatio)]);
           if (useDefaultPosition) {
             this.$store.dispatch('updatePipPos', [window.screen.availLeft + 70,
               window.screen.availTop + window.screen.availHeight - 236 - 70])
@@ -526,37 +509,22 @@ export default {
                 this.$electron.ipcRenderer.send('callBrowsingWindowMethod', 'setPosition', [window.screen.availLeft + 70,
                   window.screen.availTop + window.screen.availHeight - 236 - 70]);
               });
-          } else {
-            this.$electron.ipcRenderer.send('callBrowsingWindowMethod', 'setPosition', this.pipPos);
           }
           const calculateSize = this.pipSize[0] / this.pipSize[1] >= videoAspectRatio
             ? [this.pipSize[0], Math.round(this.pipSize[0] / videoAspectRatio)]
             : [Math.round(this.pipSize[1] * videoAspectRatio), this.pipSize[1]];
-          this.$electron.ipcRenderer.send('callBrowsingWindowMethod', 'setSize', calculateSize);
-          this.$electron.ipcRenderer.send('set-control-bounds', {
-            x: Math.round(calculateSize[0] - 65),
-            y: Math.round(calculateSize[1] / 2 - 54),
-            width: 50,
-            height: 104,
-          });
+          this.pipInfo = {
+            aspectRatio: videoAspectRatio,
+            minimumSize: [420, Math.round(420 / videoAspectRatio)],
+            pipSize: calculateSize,
+            pipPos: this.pipPos,
+          };
         });
     },
     handleWindowChangeExitPip() {
       const newDisplayId = this.$electron.remote.screen
         .getDisplayNearestPoint({ x: this.winPos[0], y: this.winPos[1] }).id;
-      // if (this.oldDisplayId !== newDisplayId) {
-      //   windowRectService.calculateWindowRect(
-      //     this.browsingSize,
-      //     true,
-      //     this.winPos.concat(this.winSize),
-      //   );
-      // } else {
-      //   this.$electron.ipcRenderer.send('callMainWindowMethod', 'setSize', this.browsingSize);
-      //   this.$electron.ipcRenderer.send('callMainWindowMethod', 'setPosition', this.browsingPos);
-      // }
       this.oldDisplayId = newDisplayId;
-      // this.$electron.ipcRenderer.send('callMainWindowMethod', 'setAspectRatio', [0]);
-      // this.$electron.ipcRenderer.send('callMainWindowMethod', 'setMinimumSize', [570, 375]);
     },
     handleDanmuDisplay() {
       if (this.pipType === 'iqiyi') {
@@ -594,7 +562,6 @@ export default {
     },
     exitPipOperation() {
       this.$electron.ipcRenderer.send('exit-pip');
-      this.$electron.ipcRenderer.send('store-pip-pos');
       this.handleWindowChangeExitPip();
       if (this.pipType === 'youtube') {
         this.youtubeRecover();
diff --git a/src/renderer/containers/LandingView.vue b/src/renderer/containers/LandingView.vue
index 3a3b74c6ba..9c52624573 100644
--- a/src/renderer/containers/LandingView.vue
+++ b/src/renderer/containers/LandingView.vue
@@ -173,6 +173,7 @@ import { log } from '@/libs/Log';
 import Sagi from '@/libs/sagi';
 import { findNsfwFistFilter } from '@/libs/utils';
 import { Browsing as browsingActions } from '@/store/actionTypes';
+import asyncStorage from '@/helpers/asyncStorage';
 
 Vue.component('PlaylistItem', PlaylistItem);
 Vue.component('VideoItem', VideoItem);
@@ -206,7 +207,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['winWidth', 'winPos', 'defaultDir', 'isFullScreen', 'incognitoMode', 'hideNSFW', 'smartMode', 'nsfwProcessDone']),
+    ...mapGetters(['winWidth', 'winPos', 'defaultDir', 'isFullScreen', 'incognitoMode', 'hideNSFW', 'smartMode', 'nsfwProcessDone', 'pipSize', 'pipPos']),
     lastIndex: {
       get() {
         return (this.firstIndex + this.showItemNum) - 1;
@@ -376,7 +377,11 @@ export default {
       return steps * (this.thumbnailWidth + this.marginRight);
     },
     handleSidebarIcon(site: string) {
-      this.$electron.ipcRenderer.send('add-browsing');
+      asyncStorage.get('browsingPip').then((data) => {
+        this.$store.dispatch('updatePipSize', data.pipSize || this.pipSize);
+        this.$store.dispatch('updatePipPos', data.pipPos || this.pipPos);
+        this.$electron.ipcRenderer.send('add-browsing', { size: data.pipSize || this.pipSize, position: data.pipPos || this.pipPos });
+      });
       const url = `https://www.${site}.com`;
       this.$electron.ipcRenderer.send('change-channel', { url });
       this.$router.push({
diff --git a/src/renderer/main.ts b/src/renderer/main.ts
index 38c67bbd9f..53b8f7f9c4 100644
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@@ -390,13 +390,15 @@ new Vue({
     });
     asyncStorage.get('browsing').then((data) => {
       this.$store.dispatch('updateBrowsingSize', data.browsingSize || this.browsingSize);
-      this.$store.dispatch('updatePipSize', data.pipSize || this.pipSize);
-      this.$store.dispatch('updatePipPos', data.pipPos || this.pipPos);
       if (data.browsingPos) {
         this.$store.dispatch('updateBrowsingPos', data.browsingPos);
       }
       this.updateBarrageOpen(data.barrageOpen || this.barrageOpen);
     });
+    asyncStorage.get('browsingPip').then((data) => {
+      this.$store.dispatch('updatePipSize', data.pipSize || this.pipSize);
+      this.$store.dispatch('updatePipPos', data.pipPos || this.pipPos);
+    });
     this.$bus.$on('delete-file', () => {
       this.refreshMenu();
     });

From 61b34a1b4328ac44af1aa10d84b17e6a931b555b Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Wed, 28 Aug 2019 16:16:56 +0800
Subject: [PATCH 024/123] fix(browsingview): fix browsing header display error

---
 package.json                             |  2 +-
 src/main/index.js                        |  3 --
 src/renderer/browsing.ts                 | 35 ------------------------
 src/renderer/components/BrowsingView.vue | 31 ++++++---------------
 src/renderer/main.ts                     |  8 ++++--
 5 files changed, 16 insertions(+), 63 deletions(-)

diff --git a/package.json b/package.json
index b45782a34e..66b376d231 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
     "vue-electron": "^1.0.6",
     "vue-electron-json-storage": "^1.0.1",
     "vue-i18n": "^7.7.0",
-    "vue-router": "3.1.2",
+    "vue-router": "3.0.7",
     "vuex": "^3.0.1",
     "winston": "^3.1.0",
     "winston-daily-rotate-file": "^3.9.0"
diff --git a/src/main/index.js b/src/main/index.js
index 700bad8806..7187866581 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -776,9 +776,6 @@ function registerMainWindowEvent(mainWindow) {
     menuService.updateFocusedWindow(true);
     mainWindow.focus();
   });
-  ipcMain.on('update-header-to-show', (e, headerToShow) => {
-    mainWindow.send('update-header-to-show', headerToShow);
-  });
   ipcMain.on('update-route-name', (e, route) => {
     routeName = route;
   });
diff --git a/src/renderer/browsing.ts b/src/renderer/browsing.ts
index c0b5b16fb5..0d7a9f7eec 100644
--- a/src/renderer/browsing.ts
+++ b/src/renderer/browsing.ts
@@ -1,44 +1,9 @@
 import Vue from 'vue';
-import Vuex from 'vuex';
-import VueI18n from 'vue-i18n';
-import { hookVue } from '@/kerning';
 // @ts-ignore
 import BrowsingPip from '@/components/BrowsingPip.vue';
-import store from '@/store';
 
-hookVue(Vue);
-Vue.use(VueI18n);
-Vue.use(Vuex);
-
-Vue.prototype.$bus = new Vue(); // Global event bus
-Vue.directive('fade-in', {
-  bind(el: HTMLElement, binding: unknown) {
-    if (!el) return;
-    const { value } = binding as { value: unknown };
-    if (value) {
-      el.classList.add('fade-in');
-      el.classList.remove('fade-out');
-    } else {
-      el.classList.add('fade-out');
-      el.classList.remove('fade-in');
-    }
-  },
-  update(el: HTMLElement, binding) {
-    const { oldValue, value } = binding;
-    if (oldValue !== value) {
-      if (value) {
-        el.classList.add('fade-in');
-        el.classList.remove('fade-out');
-      } else {
-        el.classList.add('fade-out');
-        el.classList.remove('fade-in');
-      }
-    }
-  },
-});
 new Vue({
   components: { BrowsingPip },
   data: {},
-  store,
   template: '<BrowsingPip/>',
 }).$mount('#app');
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index cbc0236e91..53eb4e81a1 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -189,19 +189,15 @@ export default {
         });
       } else {
         currentView.setBounds({
-          x: 0, y: 36, width: this.browsingSize[0], height: this.browsingSize[1],
+          x: 0, y: 36, width: this.winSize[0], height: this.winSize[1] - 36,
         });
       }
     },
   },
   created() {
     this.$electron.ipcRenderer.send('callMainWindowMethod', 'setMinimumSize', [570, 375]);
-    windowRectService.calculateWindowRect(
-      this.browsingSize,
-      true,
-      this.winPos.concat(this.winSize),
-    );
-    this.$store.dispatch('updateBrowsingPos', this.winPos);
+    this.$electron.ipcRenderer.send('callMainWindowMethod', 'setSize', this.browsingSize);
+    this.$electron.ipcRenderer.send('callMainWindowMethod', 'setPosition', this.browsingPos);
     this.$electron.ipcRenderer.send('callMainWindowMethod', 'setAspectRatio', [0]);
   },
   mounted() {
@@ -242,9 +238,6 @@ export default {
     this.$electron.ipcRenderer.on('quit', () => {
       this.quit = true;
     });
-    this.$electron.ipcRenderer.on('update-header-to-show', (e: Event, headerToShow: boolean) => {
-      this.headerToShow = headerToShow;
-    });
     this.$electron.ipcRenderer.on('update-pip-state', (e: Event, info: { size: number[], position: number[] }) => {
       this.$store.dispatch('updatePipPos', info.position);
       this.$store.dispatch('updatePipSize', info.size);
@@ -358,18 +351,12 @@ export default {
     addListenerToBrowser() {
       const view = this.$electron.remote.getCurrentWindow().getBrowserViews()[0];
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      view.webContents.addListener('ipc-message', (evt: Event, channel: string, args: any) => {
-        this.ipcMessage(channel, args);
-      });
+      view.webContents.addListener('ipc-message', this.ipcMessage);
       view.webContents.addListener('dom-ready', this.domReady);
-      view.webContents.addListener('new-window', (e: Event, url: string, disposition: string) => {
-        this.newWindow(url, disposition);
-      });
+      view.webContents.addListener('new-window', this.newWindow);
       view.webContents.addListener('did-start-loading', this.didStartLoading);
       view.webContents.addListener('did-stop-loading', this.didStopLoading);
-      view.webContents.addListener('will-navigate', (e: Event, url: string) => {
-        this.willNavigate(url);
-      });
+      view.webContents.addListener('will-navigate', this.willNavigate);
     },
     removeListener() {
       const currentBrowserViews = this.$electron.remote.getCurrentWindow().getBrowserViews();
@@ -383,12 +370,12 @@ export default {
         currentWebContents.removeListener('will-navigate', this.willNavigate);
       }
     },
-    newWindow(url: string, disposition: string) {
+    newWindow(e: Event, url: string, disposition: string) {
       if (disposition !== 'new-window') {
         this.handleOpenUrl({ url });
       }
     },
-    willNavigate(url: string) {
+    willNavigate(e: Event, url: string) {
       if (!url || url === 'about:blank' || urlParseLax(this.currentUrl).href === urlParseLax(url).href) return;
       this.currentUrl = urlParseLax(url).href;
       this.startTime = new Date().getTime();
@@ -407,7 +394,7 @@ export default {
       this.removeListener();
     },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ipcMessage(channel: string, args: any) {
+    ipcMessage(evt: Event, channel: string, args: any) {
       switch (channel) {
         case 'open-url':
           this.handleOpenUrl(args);
diff --git a/src/renderer/main.ts b/src/renderer/main.ts
index 53b8f7f9c4..ab8daff2bb 100644
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@@ -180,7 +180,7 @@ new Vue({
   },
   computed: {
     ...mapGetters(['volume', 'muted', 'intrinsicWidth', 'intrinsicHeight', 'ratio', 'winAngle', 'winWidth', 'winHeight', 'winPos', 'winSize', 'chosenStyle', 'chosenSize', 'mediaHash', 'list', 'enabledSecondarySub', 'isRefreshing', 'browsingSize', 'pipSize', 'pipPos', 'barrageOpen', 'isPip', 'pipAlwaysOnTop', 'isMaximized',
-      'primarySubtitleId', 'secondarySubtitleId', 'audioTrackList', 'isFullScreen', 'paused', 'singleCycle', 'isHiddenByBossKey', 'isMinimized', 'isFocused', 'originSrc', 'defaultDir', 'ableToPushCurrentSubtitle', 'displayLanguage', 'calculatedNoSub', 'sizePercent', 'snapshotSavedPath', 'duration', 'reverseScrolling',
+      'primarySubtitleId', 'secondarySubtitleId', 'audioTrackList', 'isFullScreen', 'paused', 'singleCycle', 'isHiddenByBossKey', 'isMinimized', 'isFocused', 'originSrc', 'defaultDir', 'ableToPushCurrentSubtitle', 'displayLanguage', 'calculatedNoSub', 'sizePercent', 'snapshotSavedPath', 'duration', 'reverseScrolling', 'pipSize', 'pipPos',
     ]),
     ...inputMapGetters({
       wheelDirection: iGT.GET_WHEEL_DIRECTION,
@@ -735,7 +735,11 @@ new Vue({
       const channels = ['iqiyi', 'bilibili', 'youtube'];
       channels.forEach((channel: string, index: number) => {
         this.menuService.on(`favourite.${channel}`, () => {
-          this.$electron.ipcRenderer.send('add-browsing');
+          asyncStorage.get('browsingPip').then((data) => {
+            this.$store.dispatch('updatePipSize', data.pipSize || this.pipSize);
+            this.$store.dispatch('updatePipPos', data.pipPos || this.pipPos);
+            this.$electron.ipcRenderer.send('add-browsing', { size: data.pipSize || this.pipSize, position: data.pipPos || this.pipPos });
+          });
           this.$electron.ipcRenderer.send('change-channel', { url: urls[index] });
           this.$router.push({
             name: 'browsing-view',

From 037e261d7eb0824679d930ec6d6c3c0621592546 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Wed, 28 Aug 2019 16:42:48 +0800
Subject: [PATCH 025/123] fix(browsingview): fix js error when enter pip

---
 src/renderer/components/BrowsingView.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 53eb4e81a1..49bad6667a 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -458,7 +458,8 @@ export default {
       if (!url || url === 'about:blank' || urlParseLax(url).href === urlParseLax(this.currentUrl).href) return;
       this.loadingState = true;
       this.currentUrl = urlParseLax(url).href;
-      this.$electron.ipcRenderer.send('create-browser-view', { url: urlParseLax(url).href });
+      const protocol = urlParseLax(url).protocol;
+      this.$electron.ipcRenderer.send('create-browser-view', { url: protocol ? this.currentUrl : `https:${this.currentUrl}` });
     },
     pipAdapter() {
       const parseUrl = urlParseLax(this.currentPipBrowserView().webContents.getURL());
@@ -543,6 +544,7 @@ export default {
       }
     },
     enterPipOperation() {
+      this.handleWindowChangeEnterPip();
       this.$store.dispatch('updateBrowsingSize', this.winSize);
       this.$store.dispatch('updateBrowsingPos', this.winPos);
       this.pipAdapter();
@@ -582,7 +584,6 @@ export default {
       }
     },
     othersAdapter() {
-      this.handleWindowChangeEnterPip();
       this.currentPipBrowserView().webContents.executeJavaScript(this.othersPip.adapter)
         .then(() => {
           this.adaptFinished = true;
@@ -596,7 +597,6 @@ export default {
         .getBrowserViews()[0].webContents.executeJavaScript(this.othersPip.recover);
     },
     iqiyiAdapter() {
-      this.handleWindowChangeEnterPip();
       this.currentPipBrowserView().webContents.executeJavaScript(this.iqiyiPip.adapter).then(() => {
         this.adaptFinished = true;
       });
@@ -609,7 +609,6 @@ export default {
         .getBrowserViews()[0].webContents.executeJavaScript(this.iqiyiPip.recover);
     },
     youtubeAdapter() {
-      this.handleWindowChangeEnterPip();
       this.currentPipBrowserView().webContents.executeJavaScript(youtube.adapter).then(() => {
         this.adaptFinished = true;
       });
@@ -623,7 +622,6 @@ export default {
         .executeJavaScript(bilibiliFindType).then((r: (HTMLElement | null)[]) => {
           this.bilibiliType = ['bangumi', 'videoStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
         }).then(() => {
-          this.handleWindowChangeEnterPip();
           this.currentPipBrowserView().webContents.executeJavaScript(this.bilibiliPip.adapter);
         }).then(() => {
           this.adaptFinished = true;

From a95b3ea018297de9b46235ddca4839562f1109df Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Wed, 28 Aug 2019 16:57:06 +0800
Subject: [PATCH 026/123] style(browsingview): adapt pip size when window
 resize

---
 src/main/index.js                        | 3 +++
 src/renderer/components/BrowsingPip.vue  | 1 +
 src/renderer/components/BrowsingView.vue | 3 +++
 3 files changed, 7 insertions(+)

diff --git a/src/main/index.js b/src/main/index.js
index 7187866581..5557512433 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -741,6 +741,9 @@ function registerMainWindowEvent(mainWindow) {
     menuService.updateFocusedWindow(false);
     browsingWindow.focus();
   });
+  ipcMain.on('update-pip-size', (evt, args) => {
+    mainWindow.send('update-pip-size', args);
+  });
   ipcMain.on('set-bounds', (evt, args) => {
     if (pipControlView) pipControlView.setBounds(args.control);
     if (titlebarView) titlebarView.setBounds(args.titlebar);
diff --git a/src/renderer/components/BrowsingPip.vue b/src/renderer/components/BrowsingPip.vue
index 1569ebeee2..a14f34ad03 100644
--- a/src/renderer/components/BrowsingPip.vue
+++ b/src/renderer/components/BrowsingPip.vue
@@ -37,6 +37,7 @@ export default {
     });
     window.addEventListener('resize', throttle(() => {
       const size = electron.remote.getCurrentWindow().getSize();
+      electron.ipcRenderer.send('update-pip-size', size);
       electron.ipcRenderer.send('set-bounds', {
         titlebar: {
           x: 0,
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 49bad6667a..f17447999b 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -238,6 +238,9 @@ export default {
     this.$electron.ipcRenderer.on('quit', () => {
       this.quit = true;
     });
+    this.$electron.ipcRenderer.on('update-pip-size', (e: Event, args: number[]) => {
+      this.$store.dispatch('updatePipSize', args);
+    });
     this.$electron.ipcRenderer.on('update-pip-state', (e: Event, info: { size: number[], position: number[] }) => {
       this.$store.dispatch('updatePipPos', info.position);
       this.$store.dispatch('updatePipSize', info.size);

From 51f98b3aa0b21b9453c2013d03aad6a7ea90c1d8 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Wed, 28 Aug 2019 19:43:16 +0800
Subject: [PATCH 027/123] feat(browsingview): add logic when page goback

---
 src/main/helpers/BrowserViewManager.ts   | 28 ++++++++++++++++++++----
 src/renderer/components/BrowsingView.vue |  2 +-
 src/shared/pip/bilibili.js               | 24 ++++++++++++++------
 3 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/main/helpers/BrowserViewManager.ts b/src/main/helpers/BrowserViewManager.ts
index 7380163fce..34574adebd 100644
--- a/src/main/helpers/BrowserViewManager.ts
+++ b/src/main/helpers/BrowserViewManager.ts
@@ -1,4 +1,5 @@
 import { BrowserView } from 'electron';
+import { remove } from 'lodash';
 import { bilibiliVideoPause, bilibiliFindType } from '../../shared/pip/bilibili';
 
 type ChannelData = {
@@ -23,6 +24,8 @@ export class BrowserViewManager implements IBrowserViewManager {
     pipPage: BrowserViewHistory | null,
   };
 
+  private backPage: BrowserViewHistory[];
+
   public constructor() {
     this.history = new Map();
     this.currentPip = {
@@ -30,6 +33,7 @@ export class BrowserViewManager implements IBrowserViewManager {
       pipChannel: '',
       pipPage: null,
     };
+    this.backPage = [];
   }
 
   public create(channel: string, url: string): BrowserViewData {
@@ -49,7 +53,19 @@ export class BrowserViewManager implements IBrowserViewManager {
         const view = this.history[this.currentChannel].list[currentIndex].view;
         this.pauseVideo(view);
       } else {
-        const lastPage = this.history[channel].list[currentIndex];
+        const list = this.history[this.currentChannel].list;
+        if (this.backPage.length) {
+          remove(this.history[this.currentChannel].list,
+            (list: BrowserViewHistory) => {
+              if (this.backPage.includes(list)) {
+                list.view.destroy();
+                return true;
+              }
+              return false;
+            });
+          this.backPage = [];
+        }
+        const lastPage = list[currentIndex];
         if (lastPage) {
           lastPage.view.webContents.loadURL(lastPage.url);
           lastPage.view.webContents.once('media-started-playing', () => {
@@ -57,8 +73,7 @@ export class BrowserViewManager implements IBrowserViewManager {
               let type = '';
               lastPage.view.webContents
                 .executeJavaScript(bilibiliFindType).then((r: (HTMLElement | null)[]) => {
-                  type = ['bangumi', 'videoStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
-                  console.log(type);
+                  type = ['bangumi', 'videoStreaming', 'iframeStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
                   lastPage.view.webContents.executeJavaScript(bilibiliVideoPause(type));
                 });
             } else {
@@ -92,10 +107,15 @@ export class BrowserViewManager implements IBrowserViewManager {
   }
 
   public back(): BrowserViewData {
+    const index = this.history[this.currentChannel].currentIndex;
+    this.backPage.push(this.history[this.currentChannel].list[index]);
     return this.jump(true);
   }
 
   public forward(): BrowserViewData {
+    if (this.backPage.length) {
+      this.backPage.pop();
+    }
     return this.jump(false);
   }
 
@@ -173,7 +193,7 @@ export class BrowserViewManager implements IBrowserViewManager {
         let type = '';
         currentView.webContents
           .executeJavaScript(bilibiliFindType).then((r: (HTMLElement | null)[]) => {
-            type = ['bangumi', 'videoStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
+            type = ['bangumi', 'videoStreaming', 'iframeStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
             currentView.webContents.executeJavaScript(bilibiliVideoPause(type));
           });
       } else {
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index f17447999b..7a871ec21e 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -623,7 +623,7 @@ export default {
     bilibiliAdapter() {
       this.currentPipBrowserView().webContents
         .executeJavaScript(bilibiliFindType).then((r: (HTMLElement | null)[]) => {
-          this.bilibiliType = ['bangumi', 'videoStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
+          this.bilibiliType = ['bangumi', 'videoStreaming', 'iframeStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
         }).then(() => {
           this.currentPipBrowserView().webContents.executeJavaScript(this.bilibiliPip.adapter);
         }).then(() => {
diff --git a/src/shared/pip/bilibili.js b/src/shared/pip/bilibili.js
index b8661c5a9b..550930693f 100644
--- a/src/shared/pip/bilibili.js
+++ b/src/shared/pip/bilibili.js
@@ -106,11 +106,16 @@ export function bilibili(type, barrageOpen, winSize) {
         document.body.style.cssText = "overflow: hidden";
         Object.defineProperty(document.body.style, "overflow", {get: function(){return "hidden"}, set: function(){}});
         document.querySelector("iframe").contentDocument.querySelector(".aside-area").style.display = "none";
-        document.querySelector(".game-header").style.display = "none";
-        document.querySelector(".link-navbar").style.display = "none";
+        var header = document.querySelector(".game-header");
+        var navbar = document.querySelector(".link-navbar");
+        var sidebar = document.querySelector(".agile-sidebar");
+        var navwrapper = document.querySelector(".bili-header-m");
+        if (header) header.style.display = "none";
+        if (navbar) navbar.style.display = "none";
+        if (sidebar) sidebar.style.display = "none";
+        if (navwrapper) navwrapper.style.display = "none";
         document.querySelector("iframe").contentDocument.querySelector("#head-info-vm").style.display = "none";
         document.querySelector("iframe").contentDocument.querySelector(".aside-area-toggle-btn").style.display = "none";
-        document.querySelector(".agile-sidebar").style.display = "none";
         document.querySelector("iframe").contentDocument.querySelector("#gift-control-vm").style.display = "none";
         var el = document.querySelector("iframe");
         el.style.cssText = "position: fixed; left: 0; top: 0; z-index: 9999";
@@ -128,11 +133,16 @@ export function bilibili(type, barrageOpen, winSize) {
       recover: 'Object.defineProperty(document.body.style, "overflow", {value: "scroll",writable: true});'
         + 'document.body.style.cssText = "overflow: scroll";'
         + 'document.querySelector("iframe").contentDocument.querySelector(".aside-area").style.display = "";'
-        + 'document.querySelector(".game-header").style.display = "";'
-        + 'document.querySelector(".link-navbar").style.display = "";'
+        + 'var header = document.querySelector(".game-header");'
+        + 'var navbar = document.querySelector(".link-navbar");'
+        + 'var sidebar = document.querySelector(".agile-sidebar");'
+        + 'var navwrapper = document.querySelector(".bili-header-m");'
+        + 'if (navwrapper) navwrapper.style.display = "";'
+        + 'if (sidebar) sidebar.style.display = "";'
+        + 'if (navbar) navbar.style.display = "";'
+        + 'if (header) header.style.display = "";'
         + 'document.querySelector("iframe").contentDocument.querySelector("#head-info-vm").style.display = "";'
         + 'document.querySelector("iframe").contentDocument.querySelector(".aside-area-toggle-btn").style.display = "";'
-        + 'document.querySelector(".agile-sidebar").style.display = "";'
         + 'document.querySelector("iframe").contentDocument.querySelector("#gift-control-vm").style.display = "";'
         + 'document.querySelector("iframe").contentDocument.querySelector(".bilibili-live-player-video-danmaku").style.opacity = "1";'
         + 'var el = document.querySelector("iframe");'
@@ -174,4 +184,4 @@ export function bilibili(type, barrageOpen, winSize) {
   };
 }
 
-export const bilibiliFindType = '[document.querySelector(".bilibili-player-video-message"), document.querySelector(".live-player-ctnr"), document.querySelector("iframe"), document.querySelector("#bofqi")]';
+export const bilibiliFindType = 'var contents = document.querySelector("iframe") ? document.querySelector("iframe").contentDocument : null;[document.querySelector(".bilibili-player-video-message"), document.querySelector(".live-player-ctnr"), document.querySelector(".container-wrapper"), contents ? contents.querySelector(".live-room-app") : null, document.querySelector("#bofqi")]';

From a82488cb6f6f29a9809d27e665cc20ac4fc673f2 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Thu, 29 Aug 2019 16:09:47 +0800
Subject: [PATCH 028/123] style(browsingview): fix danmu control and make
 bookmark can reload homepage

---
 src/main/index.js                             | 27 +++++-
 src/renderer/components/BrowsingView.vue      | 94 +++++++++++++------
 .../BrowsingView/BrowsingFavicons.vue         |  6 +-
 static/pip/preload.js                         |  3 +
 static/pip/titlebarPreload.js                 |  3 +
 5 files changed, 96 insertions(+), 37 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index 5557512433..fc72c04bce 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -315,7 +315,7 @@ function createBrowsingWindow(args) {
       experimentalFeatures: true,
       webviewTag: true,
     },
-    backgroundColor: '#6a6a6a',
+    backgroundColor: '#000000',
     acceptFirstMouse: false,
     show: false,
   };
@@ -506,7 +506,11 @@ function registerMainWindowEvent(mainWindow) {
   });
   ipcMain.on('change-channel', (evt, args) => {
     if (!browserViewManager) browserViewManager = new BrowserViewManager();
-    const channel = urlParse(args.url).hostname.includes('bilibili') ? 'www.bilibili.com' : urlParse(args.url).hostname;
+    const hostname = urlParse(args.url).hostname;
+    let channel = hostname.slice(hostname.indexOf('.') + 1, hostname.length);
+    if (args.url.includes('youtube')) {
+      channel = 'youtube.com';
+    }
     const newChannel = browserViewManager.changeChanel(channel, args.url);
     const view = newChannel.view ? newChannel.view : newChannel.page.view;
     const url = newChannel.view ? args.url : newChannel.page.url;
@@ -529,7 +533,11 @@ function registerMainWindowEvent(mainWindow) {
   });
   ipcMain.on('create-browser-view', (evt, args) => {
     if (!browserViewManager) browserViewManager = new BrowserViewManager();
-    const channel = urlParse(args.url).hostname.includes('bilibili') ? 'www.bilibili.com' : urlParse(args.url).hostname;
+    const hostname = urlParse(args.url).hostname;
+    let channel = hostname.slice(hostname.indexOf('.') + 1, hostname.length);
+    if (args.url.includes('youtube')) {
+      channel = 'youtube.com';
+    }
     const currentMainBrowserView = browserViewManager
       .create(channel, args.url);
     const mainBrowser = mainWindow.getBrowserView();
@@ -560,6 +568,9 @@ function registerMainWindowEvent(mainWindow) {
   ipcMain.on('danmu', () => {
     mainWindow.send('handle-danmu-display');
   });
+  ipcMain.on('handle-danmu-display', (evt, code) => {
+    browsingWindow.getBrowserViews()[0].webContents.executeJavaScript(code);
+  });
   ipcMain.on('mousemove', () => {
     if (browsingWindow && browsingWindow.isFocused()) {
       pipControlView.webContents.executeJavaScript('document.querySelector(".pip-buttons").style.display = "flex";');
@@ -661,7 +672,12 @@ function registerMainWindowEvent(mainWindow) {
     browViews.forEach((view) => {
       browsingWindow.removeBrowserView(view);
     });
-    const browsers = browserViewManager.changePip(urlParse(mainView.webContents.getURL()).hostname);
+    const hostname = urlParse(mainView.webContents.getURL()).hostname;
+    let channel = hostname.slice(hostname.indexOf('.') + 1, hostname.length);
+    if (mainView.webContents.getURL().includes('youtube')) {
+      channel = 'youtube.com';
+    }
+    const browsers = browserViewManager.changePip(channel);
     const pipBrowser = browsers.pipBrowser;
     const mainBrowser = browsers.mainBrowser;
     mainWindow.addBrowserView(mainBrowser.page.view);
@@ -782,6 +798,9 @@ function registerMainWindowEvent(mainWindow) {
   ipcMain.on('update-route-name', (e, route) => {
     routeName = route;
   });
+  ipcMain.on('key-events', (e, keyCode) => {
+    browsingWindow.getBrowserViews()[0].webContents.executeJavaScript(`var event = new KeyboardEvent("keydown", { keyCode: ${keyCode} });window.dispatchEvent(event)`);
+  });
   ipcMain.on('drop-subtitle', (event, args) => {
     if (!mainWindow || mainWindow.webContents.isDestroyed()) return;
     args.forEach((file) => {
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 7a871ec21e..ed8ab7e17d 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -66,7 +66,6 @@ export default {
       startTime: 0,
       pipType: '',
       bilibiliType: 'video',
-      supportedRecordHost: ['www.youtube.com', 'www.bilibili.com', 'www.iqiyi.com'],
       preload: `file:${require('path').resolve(__static, 'pip/preload.js')}`,
       maskToShow: false,
       dropFiles: [],
@@ -163,7 +162,11 @@ export default {
     loadingState(val: boolean) {
       const loadUrl = this.$electron.remote.getCurrentWindow()
         .getBrowserViews()[0].webContents.getURL();
-      const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
+      const hostname = urlParseLax(loadUrl).hostname;
+      let channel = hostname.slice(hostname.indexOf('.') + 1, hostname.length);
+      if (loadUrl.includes('youtube')) {
+        channel = 'youtube.com';
+      }
       this.updateCanGoBack(this.$electron.remote.getCurrentWindow()
         .getBrowserViews()[0].webContents.canGoBack());
       this.updateCanGoForward(this.$electron.remote.getCurrentWindow()
@@ -177,7 +180,7 @@ export default {
         }
         this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
           .executeJavaScript(this.calculateVideoNum, (r: number) => {
-            this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
+            this.hasVideo = channel === 'youtube.com' && !getVideoId(loadUrl).id ? false : !!r;
           });
       }
     },
@@ -247,17 +250,21 @@ export default {
       this.updateIsPip(false);
     });
     this.$electron.ipcRenderer.on('update-browser-state', (e: Event, state: { url: string, canGoBack: boolean, canGoForward: boolean }) => {
-      this.currentUrl = state.url;
+      this.currentUrl = urlParseLax(state.url).href;
       this.removeListener();
       this.addListenerToBrowser();
       this.canGoBack = state.canGoBack;
       this.canGoForward = state.canGoForward;
       const loadUrl = this.$electron.remote.getCurrentWindow()
         .getBrowserViews()[0].webContents.getURL();
-      const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
+      const hostname = urlParseLax(loadUrl).hostname;
+      let channel = hostname.slice(hostname.indexOf('.') + 1, hostname.length);
+      if (loadUrl.includes('youtube')) {
+        channel = 'youtube.com';
+      }
       this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
         .executeJavaScript(this.calculateVideoNum, (r: number) => {
-          this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
+          this.hasVideo = channel === 'youtube.com' && !getVideoId(loadUrl).id ? false : !!r;
         });
       this.$bus.$emit('update-web-info', {
         canGoBack: state.canGoBack,
@@ -299,10 +306,14 @@ export default {
       this.updateReload(true);
       const loadUrl = this.$electron.remote.getCurrentWindow()
         .getBrowserViews()[0].webContents.getURL();
-      const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
+      const hostname = urlParseLax(loadUrl).hostname;
+      let channel = hostname.slice(hostname.indexOf('.') + 1, hostname.length);
+      if (loadUrl.includes('youtube')) {
+        channel = 'youtube.com';
+      }
       this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
         .executeJavaScript(this.calculateVideoNum, (r: number) => {
-          this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
+          this.hasVideo = channel === 'youtube.com' && !getVideoId(loadUrl).id ? false : !!r;
         });
     },
     beforeUnloadHandler(e: BeforeUnloadEvent) {
@@ -345,10 +356,27 @@ export default {
       }
     },
     handleBookmarkOpen(url: string) {
-      if (urlParseLax(this.currentUrl).hostname !== urlParseLax(url).hostname) {
+      const supportedPage = ['https://www.youtube.com/', 'https://www.bilibili.com/', 'https://www.iqiyi.com/'];
+      const newHostname = urlParseLax(url).hostname;
+      const oldHostname = urlParseLax(this.currentUrl).hostname;
+      let newChannel = newHostname.slice(newHostname.indexOf('.') + 1, newHostname.length);
+      let oldChannel = oldHostname.slice(oldHostname.indexOf('.') + 1, oldHostname.length);
+      if (url.includes('youtube')) {
+        newChannel = 'youtube.com';
+      }
+      if (this.currentUrl.includes('youtube')) {
+        oldChannel = 'youtube.com';
+      }
+      this.hasVideo = false;
+      if (newChannel !== oldChannel) {
         this.removeListener();
-        this.hasVideo = false;
         this.$electron.ipcRenderer.send('change-channel', { url });
+      } else if (this.currentUrl === url && supportedPage.includes(this.currentUrl)) {
+        this.currentMainBrowserView().webContents.reload();
+      } else {
+        this.removeListener();
+        const homePage = urlParseLax(`https://www.${newChannel}`).href;
+        this.$electron.ipcRenderer.send('create-browser-view', { url: homePage });
       }
     },
     addListenerToBrowser() {
@@ -404,16 +432,18 @@ export default {
           break;
         case 'dragover':
         case 'dragleave':
-          this.maskToShow = args.dragover;
+          // TODO drag local files to play
+          // this.maskToShow = args.dragover;
           break;
         case 'drop':
-          this.maskToShow = false;
-          if ((args.files as string[]).length) {
-            this.$electron.remote.getCurrentWindow().getBrowserViews()[0].setBounds({
-              x: 0, y: 36, width: 0, height: 0,
-            });
-            this.dropFiles = args.files;
-          }
+          // TODO drag local files to play
+          // this.maskToShow = false;
+          // if ((args.files as string[]).length) {
+          //   this.$electron.remote.getCurrentWindow().getBrowserViews()[0].setBounds({
+          //     x: 0, y: 36, width: 0, height: 0,
+          //   });
+          //   this.dropFiles = args.files;
+          // }
           break;
         case 'left-drag':
           if (this.isPip) {
@@ -465,7 +495,7 @@ export default {
       this.$electron.ipcRenderer.send('create-browser-view', { url: protocol ? this.currentUrl : `https:${this.currentUrl}` });
     },
     pipAdapter() {
-      const parseUrl = urlParseLax(this.currentPipBrowserView().webContents.getURL());
+      const parseUrl = urlParseLax(this.currentMainBrowserView().webContents.getURL());
       if (parseUrl.hostname.includes('youtube')) {
         this.pipType = 'youtube';
         this.youtubeAdapter();
@@ -480,7 +510,7 @@ export default {
         this.othersAdapter();
       }
     },
-    currentPipBrowserView() {
+    currentMainBrowserView() {
       return this.$electron.remote.getCurrentWindow().getBrowserView();
     },
     handleWindowChangeEnterPip() {
@@ -489,7 +519,7 @@ export default {
       const useDefaultPosition = !this.pipPos.length
         || (this.oldDisplayId !== newDisplayId && this.oldDisplayId !== -1);
       this.oldDisplayId = newDisplayId;
-      this.currentPipBrowserView().webContents
+      this.currentMainBrowserView().webContents
         .executeJavaScript(this.getVideoStyle).then((result: CSSStyleDeclaration) => {
           const videoAspectRatio = parseFloat(result.width as string)
             / parseFloat(result.height as string);
@@ -520,10 +550,10 @@ export default {
     handleDanmuDisplay() {
       if (this.pipType === 'iqiyi') {
         this.updateBarrageOpen(!this.barrageOpen);
-        this.currentPipBrowserView().webContents.executeJavaScript(this.iqiyiBarrage);
+        this.$electron.ipcRenderer.send('handle-danmu-display', this.iqiyiBarrage);
       } else if (this.pipType === 'bilibili') {
         this.updateBarrageOpen(!this.barrageOpen);
-        this.currentPipBrowserView().webContents.executeJavaScript(this.bilibiliBarrage);
+        this.$electron.ipcRenderer.send('handle-danmu-display', this.bilibiliBarrage);
       }
     },
     handleUrlForward() {
@@ -579,15 +609,19 @@ export default {
         this.updateIsPip(false);
         const loadUrl = this.$electron.remote.getCurrentWindow()
           .getBrowserViews()[0].webContents.getURL();
-        const recordIndex = this.supportedRecordHost.indexOf(urlParseLax(loadUrl).hostname);
+        const hostname = urlParseLax(loadUrl).hostname;
+        let channel = hostname.slice(hostname.indexOf('.') + 1, hostname.length);
+        if (loadUrl.includes('youtube')) {
+          channel = 'youtube.com';
+        }
         this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
           .executeJavaScript(this.calculateVideoNum, (r: number) => {
-            this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
+            this.hasVideo = channel === 'youtube.com' && !getVideoId(loadUrl).id ? false : !!r;
           });
       }
     },
     othersAdapter() {
-      this.currentPipBrowserView().webContents.executeJavaScript(this.othersPip.adapter)
+      this.currentMainBrowserView().webContents.executeJavaScript(this.othersPip.adapter)
         .then(() => {
           this.adaptFinished = true;
         });
@@ -600,7 +634,7 @@ export default {
         .getBrowserViews()[0].webContents.executeJavaScript(this.othersPip.recover);
     },
     iqiyiAdapter() {
-      this.currentPipBrowserView().webContents.executeJavaScript(this.iqiyiPip.adapter).then(() => {
+      this.currentMainBrowserView().webContents.executeJavaScript(this.iqiyiPip.adapter).then(() => {
         this.adaptFinished = true;
       });
     },
@@ -612,7 +646,7 @@ export default {
         .getBrowserViews()[0].webContents.executeJavaScript(this.iqiyiPip.recover);
     },
     youtubeAdapter() {
-      this.currentPipBrowserView().webContents.executeJavaScript(youtube.adapter).then(() => {
+      this.currentMainBrowserView().webContents.executeJavaScript(youtube.adapter).then(() => {
         this.adaptFinished = true;
       });
     },
@@ -621,11 +655,11 @@ export default {
         .getBrowserViews()[0].webContents.executeJavaScript(youtube.recover);
     },
     bilibiliAdapter() {
-      this.currentPipBrowserView().webContents
+      this.currentMainBrowserView().webContents
         .executeJavaScript(bilibiliFindType).then((r: (HTMLElement | null)[]) => {
           this.bilibiliType = ['bangumi', 'videoStreaming', 'iframeStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
         }).then(() => {
-          this.currentPipBrowserView().webContents.executeJavaScript(this.bilibiliPip.adapter);
+          this.currentMainBrowserView().webContents.executeJavaScript(this.bilibiliPip.adapter);
         }).then(() => {
           this.adaptFinished = true;
         });
diff --git a/src/renderer/components/BrowsingView/BrowsingFavicons.vue b/src/renderer/components/BrowsingView/BrowsingFavicons.vue
index 7a4ce4ce2a..7576213a89 100644
--- a/src/renderer/components/BrowsingView/BrowsingFavicons.vue
+++ b/src/renderer/components/BrowsingView/BrowsingFavicons.vue
@@ -61,9 +61,9 @@ export default {
     return {
       showFavicon: true,
       favicon: [
-        { name: '爱奇艺', type: 'iqiyi', url: 'https://www.iqiyi.com' },
-        { name: 'Bilibili', type: 'bilibili', url: 'https://www.bilibili.com' },
-        { name: 'YouTube', type: 'youtube', url: 'https://www.youtube.com' },
+        { name: '爱奇艺', type: 'iqiyi', url: 'https://www.iqiyi.com/' },
+        { name: 'Bilibili', type: 'bilibili', url: 'https://www.bilibili.com/' },
+        { name: 'YouTube', type: 'youtube', url: 'https://www.youtube.com/' },
       ],
       faviconIndex: -1,
     };
diff --git a/static/pip/preload.js b/static/pip/preload.js
index 379f83620f..7b16c7d796 100644
--- a/static/pip/preload.js
+++ b/static/pip/preload.js
@@ -106,6 +106,9 @@ document.addEventListener('DOMContentLoaded', () => {
     sendToHost('dragleave', { dragover: false });
   });
   window.addEventListener('keydown', (evt) => {
+    if (pipBtns) {
+      sendToHost('key-events', evt.keyCode);
+    }
     if (document.webkitIsFullScreen && evt.keyCode === 27) {
       document.webkitCancelFullScreen();
     } else if (evt.keyCode === 80) {
diff --git a/static/pip/titlebarPreload.js b/static/pip/titlebarPreload.js
index 0282dbc24a..debe643cdc 100644
--- a/static/pip/titlebarPreload.js
+++ b/static/pip/titlebarPreload.js
@@ -63,6 +63,9 @@ document.addEventListener('DOMContentLoaded', () => {
       });
     }
   }
+  window.addEventListener('keydown', (e) => {
+    ipcRenderer.send('key-events', e.keyCode);
+  });
   if (close) {
     close.addEventListener('mouseup', () => ipcRenderer.send('mouseup', 'close'));
   }

From 3681beefc5c88cb90910ff8f4330dc3911d7b319 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Thu, 29 Aug 2019 16:28:35 +0800
Subject: [PATCH 029/123] feat(browsingview): add global pip for test

---
 src/main/index.js                             | 11 ++++++--
 src/renderer/components/BrowsingView.vue      | 26 ++++++++++++++-----
 .../BrowsingView/BrowsingFavicons.vue         |  2 +-
 .../BrowsingView/BrowsingHeader.vue           | 13 +++++++++-
 4 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index fc72c04bce..3d94454bb5 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -728,6 +728,10 @@ function registerMainWindowEvent(mainWindow) {
       createTitlebarView();
       browsingWindow.show();
     }
+    if (args.isGlobal) {
+      browserViewManager.pauseVideo(mainWindow.getBrowserView());
+      mainWindow.hide();
+    }
     browsingWindow.setAspectRatio(args.pipInfo.aspectRatio);
     browsingWindow.setMinimumSize(args.pipInfo.minimumSize[0], args.pipInfo.minimumSize[1]);
     mainBrowser.page.view.setBounds({
@@ -764,7 +768,7 @@ function registerMainWindowEvent(mainWindow) {
     if (pipControlView) pipControlView.setBounds(args.control);
     if (titlebarView) titlebarView.setBounds(args.titlebar);
   });
-  ipcMain.on('exit-pip', () => {
+  ipcMain.on('exit-pip', (evt, args) => {
     if (!browserViewManager) return;
     const mainView = mainWindow.getBrowserView();
     mainWindow.removeBrowserView(mainView);
@@ -786,6 +790,9 @@ function registerMainWindowEvent(mainWindow) {
       canGoBack: exitBrowser.canBack,
       canGoForward: exitBrowser.canForward,
     });
+    if (!mainWindow.isVisible()) {
+      mainWindow.show();
+    }
     if (browsingWindow.isFullScreen()) {
       hideBrowsingWindow = true;
       browsingWindow.setFullScreen(false);
@@ -1181,7 +1188,7 @@ app.on('menu-open-dialog', (playlistId) => {
 app.on('activate', () => {
   if (!mainWindow) {
     if (app.isReady()) createMainWindow();
-  } else if (!mainWindow.isVisible()) {
+  } else if (!mainWindow.isVisible() && !browsingWindow) {
     mainWindow.show();
   }
   if (browsingWindow && browsingWindow.isMinimized()) {
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index ed8ab7e17d..7bc0886990 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -9,6 +9,7 @@
     <browsing-header
       ref="browsingHeader"
       :handle-enter-pip="handleEnterPip"
+      :handle-global-pip="handleGlobalPip"
       :handle-url-reload="handleUrlReload"
       :handle-url-back="handleUrlBack"
       :handle-url-forward="handleUrlForward"
@@ -86,6 +87,7 @@ export default {
       canGoForward: false,
       adaptFinished: false,
       pipInfo: {},
+      isGlobal: false,
     };
   },
   computed: {
@@ -123,7 +125,12 @@ export default {
     adaptFinished(val: boolean) {
       if (val) {
         const opacity = ['youtube', 'others'].includes(this.pipType) || (this.pipType === 'bilibili' && this.bilibiliType === 'others') ? 0.2 : 1;
-        this.$electron.ipcRenderer.send(this.isPip ? 'shift-pip' : 'enter-pip', { opacity, barrageOpen: opacity === 1 ? this.barrageOpen : false, pipInfo: this.pipInfo });
+        this.$electron.ipcRenderer.send(this.isPip ? 'shift-pip' : 'enter-pip', {
+          isGlobal: this.isGlobal,
+          opacity,
+          barrageOpen: opacity === 1 ? this.barrageOpen : false,
+          pipInfo: this.pipInfo,
+        });
         this.updateIsPip(true);
       }
     },
@@ -209,10 +216,11 @@ export default {
     this.$bus.$on('toggle-back', this.handleUrlBack);
     this.$bus.$on('toggle-forward', this.handleUrlForward);
     this.$bus.$on('toggle-pip', () => {
-      const focusedOnMainWindow = this.$electron.remote.getCurrentWindow().isFocused();
+      const focusedOnMainWindow = this.$electron.remote.getCurrentWindow().isVisible()
+        && this.$electron.remote.getCurrentWindow().isFocused();
       setTimeout(() => {
         if (this.acceleratorAvailable) {
-          if (!focusedOnMainWindow) {
+          if (!focusedOnMainWindow || this.isGlobal) {
             this.handleExitPip();
           } else {
             this.handleEnterPip();
@@ -296,6 +304,10 @@ export default {
       updateBarrageOpen: browsingActions.UPDATE_BARRAGE_OPEN,
       updateIsPip: browsingActions.UPDATE_IS_PIP,
     }),
+    handleGlobalPip() {
+      this.isGlobal = true;
+      this.handleEnterPip();
+    },
     focusHandler() {
       this.menuService.updateFocusedWindow(true);
       this.updatePipState(this.hasVideo);
@@ -584,6 +596,7 @@ export default {
     },
     exitPipOperation() {
       this.$electron.ipcRenderer.send('exit-pip');
+      this.isGlobal = false;
       this.handleWindowChangeExitPip();
       if (this.pipType === 'youtube') {
         this.youtubeRecover();
@@ -634,9 +647,10 @@ export default {
         .getBrowserViews()[0].webContents.executeJavaScript(this.othersPip.recover);
     },
     iqiyiAdapter() {
-      this.currentMainBrowserView().webContents.executeJavaScript(this.iqiyiPip.adapter).then(() => {
-        this.adaptFinished = true;
-      });
+      this.currentMainBrowserView().webContents
+        .executeJavaScript(this.iqiyiPip.adapter).then(() => {
+          this.adaptFinished = true;
+        });
     },
     iqiyiWatcher() {
       this.$electron.ipcRenderer.send('pip-watcher', this.iqiyiPip.watcher);
diff --git a/src/renderer/components/BrowsingView/BrowsingFavicons.vue b/src/renderer/components/BrowsingView/BrowsingFavicons.vue
index 7576213a89..a83ffc4ef9 100644
--- a/src/renderer/components/BrowsingView/BrowsingFavicons.vue
+++ b/src/renderer/components/BrowsingView/BrowsingFavicons.vue
@@ -70,7 +70,7 @@ export default {
   },
   computed: {
     calculateWidth() {
-      return this.isDarwin ? 'calc(100% - 70px - 114px - 40px)' : 'calc(100% - 50px - 110px - 135px)';
+      return this.isDarwin ? 'calc(100% - 70px - 114px - 80px)' : 'calc(100% - 100px - 110px - 135px)';
     },
     favAnimClass() {
       if (this.isDarwin) {
diff --git a/src/renderer/components/BrowsingView/BrowsingHeader.vue b/src/renderer/components/BrowsingView/BrowsingHeader.vue
index a4290fdaaa..4d06937a7d 100644
--- a/src/renderer/components/BrowsingView/BrowsingHeader.vue
+++ b/src/renderer/components/BrowsingView/BrowsingHeader.vue
@@ -28,7 +28,7 @@
     />
     <div
       :style="{
-        width: isDarwin ? '40px' : '50px',
+        width: isDarwin ? '80px' : '100px',
         display: 'flex',
         zIndex: '6',
         order: isDarwin ? 3 : 1,
@@ -36,6 +36,13 @@
         cursor: hasVideo ? 'pointer' : '',
       }"
     >
+      <Icon
+        :type="picInPicType"
+        :style="{
+          margin: isDarwin ? 'auto 10px auto auto' : 'auto auto auto 15px',
+        }"
+        @mouseup.native="handleGlobalPip"
+      />
       <Icon
         :type="picInPicType"
         :style="{
@@ -84,6 +91,10 @@ export default {
       type: Function,
       required: true,
     },
+    handleGlobalPip: {
+      type: Function,
+      required: true,
+    },
   },
   data() {
     return {

From 4f9a09babb2481a9a4ab91a415bd1de4d01143d8 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Thu, 29 Aug 2019 18:33:24 +0800
Subject: [PATCH 030/123] style(browsingview): fix pipControl display logic

---
 src/main/index.js             | 2 +-
 static/pip/preload.js         | 3 +--
 static/pip/titlebarPreload.js | 9 +++++++++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index 3d94454bb5..7d86978da4 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -768,7 +768,7 @@ function registerMainWindowEvent(mainWindow) {
     if (pipControlView) pipControlView.setBounds(args.control);
     if (titlebarView) titlebarView.setBounds(args.titlebar);
   });
-  ipcMain.on('exit-pip', (evt, args) => {
+  ipcMain.on('exit-pip', () => {
     if (!browserViewManager) return;
     const mainView = mainWindow.getBrowserView();
     mainWindow.removeBrowserView(mainView);
diff --git a/static/pip/preload.js b/static/pip/preload.js
index 7b16c7d796..a4de7d901b 100644
--- a/static/pip/preload.js
+++ b/static/pip/preload.js
@@ -45,8 +45,7 @@ document.addEventListener('DOMContentLoaded', () => {
     if (!pipBtns && remote.getCurrentWindow()
       && remote.getCurrentWindow().getBrowserViews().length > 1) {
       const winSize = remote.getCurrentWindow().getSize();
-      if (evt.pageX <= 0 || evt.pageY <= 0
-        || evt.pageX >= winSize[0] || evt.pageY >= winSize[1]) {
+      if (evt.clientX <= 0 || evt.clientX >= winSize[0] || evt.clientY >= winSize[1]) {
         sendToHost('mouseout', 'out');
       }
     }
diff --git a/static/pip/titlebarPreload.js b/static/pip/titlebarPreload.js
index debe643cdc..a039257a1a 100644
--- a/static/pip/titlebarPreload.js
+++ b/static/pip/titlebarPreload.js
@@ -66,6 +66,15 @@ document.addEventListener('DOMContentLoaded', () => {
   window.addEventListener('keydown', (e) => {
     ipcRenderer.send('key-events', e.keyCode);
   });
+  window.addEventListener('mousemove', () => {
+    ipcRenderer.send('mousemove');
+  });
+  window.addEventListener('mouseout', (e) => {
+    const winSize = remote.getCurrentWindow().getSize();
+    if (e.clientY <= 0 || e.clientX <= 0 || e.clientX >= winSize[1]) {
+      ipcRenderer.send('mouseout', 'out');
+    }
+  });
   if (close) {
     close.addEventListener('mouseup', () => ipcRenderer.send('mouseup', 'close'));
   }

From d393853209c1445cfae381e5e7351b5877430281 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Fri, 30 Aug 2019 17:13:20 +0800
Subject: [PATCH 031/123] style(browsingview): support just close mainwindow

---
 src/main/index.js                        | 21 ++++++++++++++++++++-
 src/renderer/components/BrowsingView.vue | 12 ++++++++++--
 static/pip/preload.js                    | 10 ++++++----
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index 7d86978da4..d805dca699 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -471,6 +471,10 @@ function registerMainWindowEvent(mainWindow) {
       mainWindow.send('update-pip-state', args);
     }
   });
+  ipcMain.on('remove-main-window', () => {
+    browserViewManager.pauseVideo(mainWindow.getBrowserView());
+    mainWindow.hide();
+  });
   ipcMain.on('remove-browser', () => {
     const mainView = mainWindow.getBrowserView();
     mainWindow.removeBrowserView(mainView);
@@ -584,10 +588,20 @@ function registerMainWindowEvent(mainWindow) {
       }, 3000);
     }
   });
-  ipcMain.on('mouseenter', () => {
+  ipcMain.on('pip-btn-mousemove', () => {
+    if (pipTimer) {
+      clearTimeout(pipTimer);
+    }
+  });
+  ipcMain.on('pip-btn-mouseout', () => {
     if (pipTimer) {
       clearTimeout(pipTimer);
     }
+    pipTimer = setTimeout(() => {
+      if (pipControlView && !pipControlView.isDestroyed()) {
+        pipControlView.webContents.executeJavaScript('document.querySelector(".pip-buttons").style.display = "none";');
+      }
+    }, 3000);
   });
   ipcMain.on('mouseout', () => {
     if (browsingWindow && browsingWindow.isFocused()) {
@@ -684,6 +698,10 @@ function registerMainWindowEvent(mainWindow) {
     browsingWindow.addBrowserView(pipBrowser);
     createPipControlView();
     createTitlebarView();
+    if (args.isGlobal) {
+      browserViewManager.pauseVideo(mainWindow.getBrowserView());
+      mainWindow.hide();
+    }
     pipBrowser.setBounds({
       x: 0, y: 0, width: browsingWindow.getSize()[0], height: browsingWindow.getSize()[1],
     });
@@ -770,6 +788,7 @@ function registerMainWindowEvent(mainWindow) {
   });
   ipcMain.on('exit-pip', () => {
     if (!browserViewManager) return;
+    mainWindow.show();
     const mainView = mainWindow.getBrowserView();
     mainWindow.removeBrowserView(mainView);
     const browViews = browsingWindow.getBrowserViews();
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 7bc0886990..7b15bd3721 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -212,6 +212,7 @@ export default {
   },
   mounted() {
     this.menuService = new MenuService();
+    this.menuService.updateMenuItemEnabled('file.open', false);
     this.$bus.$on('toggle-reload', this.handleUrlReload);
     this.$bus.$on('toggle-back', this.handleUrlBack);
     this.$bus.$on('toggle-forward', this.handleUrlForward);
@@ -290,6 +291,7 @@ export default {
       browsingPos: this.browsingPos,
       barrageOpen: this.barrageOpen,
     }).finally(() => {
+      this.menuService.updateMenuItemEnabled('file.open', true);
       window.removeEventListener('beforeunload', this.beforeUnloadHandler);
       window.removeEventListener('focus', this.focusHandler);
       if (this.backToLandingView) {
@@ -330,7 +332,6 @@ export default {
     },
     beforeUnloadHandler(e: BeforeUnloadEvent) {
       this.removeListener();
-      this.$electron.ipcRenderer.send('remove-browser');
       if (!this.asyncTasksDone) {
         e.returnValue = false;
         this.$store.dispatch('updateBrowsingSize', this.winSize);
@@ -341,7 +342,12 @@ export default {
           barrageOpen: this.barrageOpen,
         }).finally(() => {
           this.asyncTasksDone = true;
-          window.close();
+          if (!this.isPip) {
+            window.close();
+          } else {
+            this.isGlobal = true;
+            this.$electron.ipcRenderer.send('remove-main-window');
+          }
         });
       } else if (this.quit) {
         this.$electron.remote.app.quit();
@@ -596,6 +602,7 @@ export default {
     },
     exitPipOperation() {
       this.$electron.ipcRenderer.send('exit-pip');
+      this.asyncTasksDone = false;
       this.isGlobal = false;
       this.handleWindowChangeExitPip();
       if (this.pipType === 'youtube') {
@@ -610,6 +617,7 @@ export default {
     },
     handleEnterPip() {
       if (this.hasVideo) {
+        this.removeListener();
         this.hasVideo = false;
         this.adaptFinished = false;
         this.enterPipOperation();
diff --git a/static/pip/preload.js b/static/pip/preload.js
index a4de7d901b..61ccb8fbe1 100644
--- a/static/pip/preload.js
+++ b/static/pip/preload.js
@@ -22,9 +22,9 @@ document.addEventListener('DOMContentLoaded', () => {
   const pipBtns = document.querySelector('.pip-buttons');
   if (pipBtns) {
     pipBtns.style.display = 'flex';
-    pipBtns.addEventListener('mouseenter', () => {
+    pipBtns.addEventListener('mousemove', () => {
       if (pipTimer) clearTimeout(pipTimer);
-      sendToHost('mouseenter', 'mouseenter');
+      sendToHost('pip-btn-mousemove');
       pipBtns.style.display = 'flex';
     });
     pipTimer = setTimeout(() => {
@@ -42,7 +42,9 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
   window.addEventListener('mouseout', (evt) => {
-    if (!pipBtns && remote.getCurrentWindow()
+    if (pipBtns) {
+      sendToHost('pip-btn-mouseout');
+    } else if (remote.getCurrentWindow()
       && remote.getCurrentWindow().getBrowserViews().length > 1) {
       const winSize = remote.getCurrentWindow().getSize();
       if (evt.clientX <= 0 || evt.clientX >= winSize[0] || evt.clientY >= winSize[1]) {
@@ -58,7 +60,7 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }, true);
   window.addEventListener('mouseup', (evt) => {
-    if (isDragging) evt.stopImmediatePropagation();
+    if (isDragging && !pipBtns) evt.stopImmediatePropagation();
     mousedown = false;
     mousedownPos = null;
     windowSize = null;

From 3e35038661467167e355f00accf761f9323843b5 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Mon, 2 Sep 2019 12:12:06 +0800
Subject: [PATCH 032/123] refactor(browsingview): change browserView create
 process

---
 src/main/helpers/BrowserViewManager.ts   | 63 ++++++++++++++----------
 src/main/index.js                        | 22 +++------
 src/renderer/components/BrowsingView.vue | 48 ++++++++++--------
 3 files changed, 73 insertions(+), 60 deletions(-)

diff --git a/src/main/helpers/BrowserViewManager.ts b/src/main/helpers/BrowserViewManager.ts
index 34574adebd..2a360a03e5 100644
--- a/src/main/helpers/BrowserViewManager.ts
+++ b/src/main/helpers/BrowserViewManager.ts
@@ -36,7 +36,7 @@ export class BrowserViewManager implements IBrowserViewManager {
     this.backPage = [];
   }
 
-  public create(channel: string, url: string): BrowserViewData {
+  public create(channel: string, args: { url: string, isNewWindow?: boolean }): BrowserViewData {
     // 初始化频道数据
     if (!this.history[channel]) {
       this.history[channel] = {
@@ -46,14 +46,35 @@ export class BrowserViewManager implements IBrowserViewManager {
       };
     }
 
+    // load URL
+    const index = this.history[channel].currentIndex;
+    const lastUrl = this.history[channel].list.length
+      ? this.history[channel].list[index].url : args.url;
+    if (this.history[channel].list.length) {
+      this.history[channel].list[index].url = args.url;
+      if (args.isNewWindow) this.history[channel].list[index].view.webContents.loadURL(args.url);
+    }
+
+    // 创建上一个view数据
+    const page = {
+      url: lastUrl,
+      view: new BrowserView({
+        webPreferences: {
+          preload: `${require('path').resolve(__static, 'pip/preload.js')}`,
+        },
+      }),
+    };
+    // loadURL
+    page.view.webContents.loadURL(page.url);
+
     // 暂停当前视频
     if (this.currentChannel) {
-      const currentIndex = this.history[this.currentChannel].currentIndex;
       if (channel !== this.currentChannel) {
+        const currentIndex = this.history[this.currentChannel].currentIndex;
         const view = this.history[this.currentChannel].list[currentIndex].view;
         this.pauseVideo(view);
       } else {
-        const list = this.history[this.currentChannel].list;
+        // 清除后退的记录
         if (this.backPage.length) {
           remove(this.history[this.currentChannel].list,
             (list: BrowserViewHistory) => {
@@ -65,37 +86,26 @@ export class BrowserViewManager implements IBrowserViewManager {
             });
           this.backPage = [];
         }
-        const lastPage = list[currentIndex];
-        if (lastPage) {
-          lastPage.view.webContents.loadURL(lastPage.url);
-          lastPage.view.webContents.once('media-started-playing', () => {
+        const hasLastPage = this.history[channel].list.length;
+        if (hasLastPage) {
+          page.view.webContents.once('media-started-playing', () => {
             if (this.currentChannel.includes('bilibili')) {
               let type = '';
-              lastPage.view.webContents
+              page.view.webContents
                 .executeJavaScript(bilibiliFindType).then((r: (HTMLElement | null)[]) => {
                   type = ['bangumi', 'videoStreaming', 'iframeStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
-                  lastPage.view.webContents.executeJavaScript(bilibiliVideoPause(type));
+                  page.view.webContents.executeJavaScript(bilibiliVideoPause(type));
                 });
             } else {
-              lastPage.view.webContents.executeJavaScript('setTimeout(() => { document.querySelector("video").pause(); }, 100)');
+              page.view.webContents.executeJavaScript('setTimeout(() => { document.querySelector("video").pause(); }, 100)');
             }
           });
         }
       }
     }
-    // 创建当前view数据
-    const page = {
-      url,
-      view: new BrowserView({
-        webPreferences: {
-          preload: `${require('path').resolve(__static, 'pip/preload.js')}`,
-        },
-      }),
-    };
-    // loadURL
-    page.view.webContents.loadURL(page.url);
 
-    this.history[channel].list.push(page);
+    // 插入view到当前view的上一个位置
+    this.history[channel].list.splice(index, 0, page);
     this.history[channel].currentIndex = this.history[channel].list.length - 1;
     this.history[channel].lastUpdateTime = Date.now();
     this.currentChannel = channel;
@@ -119,9 +129,10 @@ export class BrowserViewManager implements IBrowserViewManager {
     return this.jump(false);
   }
 
-  public changeChanel(channel: string, url: string): BrowserViewData {
+  public changeChanel(channel: string,
+    args: { url: string, isNewWindow?: boolean }): BrowserViewData {
     if (!this.history[channel]) {
-      return this.create(channel, url);
+      return this.create(channel, args);
     }
     this.pauseVideo();
     this.currentChannel = channel;
@@ -239,10 +250,10 @@ export type BrowserViewData = {
 }
 
 export interface IBrowserViewManager {
-  create(channel: string, url: string): BrowserViewData
+  create(channel: string, args: { url: string, isNewWindow?: boolean }): BrowserViewData
   back(): BrowserViewData
   forward(): BrowserViewData
-  changeChanel(channel: string, url: string): BrowserViewData
+  changeChanel(channel: string, args: { url: string, isNewWindow?: boolean }): BrowserViewData
   enterPip(): { pipBrowser: BrowserView, mainBrowser: BrowserViewData }
   exitPip(): BrowserViewData
   changePip(channel: string): { pipBrowser: BrowserView, mainBrowser: BrowserViewData }
diff --git a/src/main/index.js b/src/main/index.js
index d805dca699..205ec1b0d6 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -515,7 +515,7 @@ function registerMainWindowEvent(mainWindow) {
     if (args.url.includes('youtube')) {
       channel = 'youtube.com';
     }
-    const newChannel = browserViewManager.changeChanel(channel, args.url);
+    const newChannel = browserViewManager.changeChanel(channel, args);
     const view = newChannel.view ? newChannel.view : newChannel.page.view;
     const url = newChannel.view ? args.url : newChannel.page.url;
     const mainBrowser = mainWindow.getBrowserView();
@@ -542,19 +542,7 @@ function registerMainWindowEvent(mainWindow) {
     if (args.url.includes('youtube')) {
       channel = 'youtube.com';
     }
-    const currentMainBrowserView = browserViewManager
-      .create(channel, args.url);
-    const mainBrowser = mainWindow.getBrowserView();
-    mainWindow.addBrowserView(currentMainBrowserView.view);
-    if (mainBrowser) {
-      mainWindow.removeBrowserView(BrowserView.fromId(mainBrowser.id));
-    }
-    currentMainBrowserView.view.setBounds({
-      x: 0, y: 36, width: mainWindow.getSize()[0], height: mainWindow.getSize()[1] - 36,
-    });
-    currentMainBrowserView.view.setAutoResize({
-      width: true, height: true,
-    });
+    const currentMainBrowserView = browserViewManager.create(channel, args);
     setTimeout(() => {
       mainWindow.send('update-browser-state', {
         url: args.url,
@@ -702,6 +690,12 @@ function registerMainWindowEvent(mainWindow) {
       browserViewManager.pauseVideo(mainWindow.getBrowserView());
       mainWindow.hide();
     }
+    mainBrowser.page.view.setBounds({
+      x: 0, y: 36, width: mainWindow.getSize()[0], height: mainWindow.getSize()[1] - 36,
+    });
+    mainBrowser.page.view.setAutoResize({
+      width: true, height: true,
+    });
     pipBrowser.setBounds({
       x: 0, y: 0, width: browsingWindow.getSize()[0], height: browsingWindow.getSize()[1],
     });
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 7b15bd3721..242acd95e9 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -88,6 +88,7 @@ export default {
       adaptFinished: false,
       pipInfo: {},
       isGlobal: false,
+      startLoading: false,
     };
   },
   computed: {
@@ -392,7 +393,6 @@ export default {
       } else if (this.currentUrl === url && supportedPage.includes(this.currentUrl)) {
         this.currentMainBrowserView().webContents.reload();
       } else {
-        this.removeListener();
         const homePage = urlParseLax(`https://www.${newChannel}`).href;
         this.$electron.ipcRenderer.send('create-browser-view', { url: homePage });
       }
@@ -425,22 +425,26 @@ export default {
       }
     },
     willNavigate(e: Event, url: string) {
-      if (!url || url === 'about:blank' || urlParseLax(this.currentUrl).href === urlParseLax(url).href) return;
-      this.currentUrl = urlParseLax(url).href;
-      this.startTime = new Date().getTime();
-      this.loadingState = true;
-      this.$electron.ipcRenderer.send('create-browser-view', { url });
-      this.removeListener();
+      if (!this.startLoading) {
+        this.startLoading = true;
+        if (!url || url === 'about:blank' || urlParseLax(this.currentUrl).href === urlParseLax(url).href) return;
+        this.currentUrl = urlParseLax(url).href;
+        this.startTime = new Date().getTime();
+        this.loadingState = true;
+        this.$electron.ipcRenderer.send('create-browser-view', { url });
+      }
     },
     didStartLoading() {
-      const url = this.$electron.remote.getCurrentWindow()
-        .getBrowserView().webContents.getURL();
-      if (!url || url === 'about:blank' || urlParseLax(this.currentUrl).href === urlParseLax(url).href) return;
-      this.currentUrl = urlParseLax(url).href;
-      this.startTime = new Date().getTime();
-      this.loadingState = true;
-      this.$electron.ipcRenderer.send('create-browser-view', { url });
-      this.removeListener();
+      if (!this.startLoading) {
+        this.startLoading = true;
+        const url = this.$electron.remote.getCurrentWindow()
+          .getBrowserView().webContents.getURL();
+        if (!url || url === 'about:blank' || urlParseLax(this.currentUrl).href === urlParseLax(url).href) return;
+        this.currentUrl = urlParseLax(url).href;
+        this.startTime = new Date().getTime();
+        this.loadingState = true;
+        this.$electron.ipcRenderer.send('create-browser-view', { url });
+      }
     },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ipcMessage(evt: Event, channel: string, args: any) {
@@ -496,6 +500,7 @@ export default {
       this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.focus();
     },
     didStopLoading() {
+      this.startLoading = false;
       const loadingTime: number = new Date().getTime() - this.startTime;
       if (loadingTime % 3000 === 0) {
         this.loadingState = false;
@@ -506,11 +511,14 @@ export default {
       }
     },
     handleOpenUrl({ url }: { url: string }) {
-      if (!url || url === 'about:blank' || urlParseLax(url).href === urlParseLax(this.currentUrl).href) return;
-      this.loadingState = true;
-      this.currentUrl = urlParseLax(url).href;
-      const protocol = urlParseLax(url).protocol;
-      this.$electron.ipcRenderer.send('create-browser-view', { url: protocol ? this.currentUrl : `https:${this.currentUrl}` });
+      if (!this.startLoading) {
+        this.startLoading = true;
+        if (!url || url === 'about:blank' || urlParseLax(url).href === urlParseLax(this.currentUrl).href) return;
+        this.loadingState = true;
+        this.currentUrl = urlParseLax(url).href;
+        const protocol = urlParseLax(url).protocol;
+        this.$electron.ipcRenderer.send('create-browser-view', { url: protocol ? this.currentUrl : `https:${this.currentUrl}`, isNewWindow: true });
+      }
     },
     pipAdapter() {
       const parseUrl = urlParseLax(this.currentMainBrowserView().webContents.getURL());

From 99934969608d2c3b397cd3c912731b8c3d4ad16b Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Mon, 2 Sep 2019 18:27:24 +0800
Subject: [PATCH 033/123] feat(browsing, landing): add sidebar

---
 src/main/index.js                        |  5 +-
 src/renderer/App.vue                     | 33 +++++++---
 src/renderer/components/BrowsingView.vue | 11 ++++
 src/renderer/components/Sidebar.vue      | 77 ++++++++++++++++++++++++
 src/renderer/containers/LandingView.vue  | 71 ----------------------
 5 files changed, 117 insertions(+), 80 deletions(-)
 create mode 100644 src/renderer/components/Sidebar.vue

diff --git a/src/main/index.js b/src/main/index.js
index 7d86978da4..87cf6d07d5 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -525,7 +525,10 @@ function registerMainWindowEvent(mainWindow) {
       });
     }, 150);
     view.setBounds({
-      x: 0, y: 36, width: mainWindow.getSize()[0], height: mainWindow.getSize()[1] - 36,
+      x: args.sidebar ? 76 : 0,
+      y: 36,
+      width: args.sidebar ? mainWindow.getSize()[0] - 76 : mainWindow.getSize()[0],
+      height: mainWindow.getSize()[1] - 36,
     });
     view.setAutoResize({
       width: true, height: true,
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index b618086635..3b1829fd1e 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -7,16 +7,27 @@
     <Titlebar
       v-if="$route.name !== 'playing-view'"
       :is-landing-view="$route.name === 'landing-view'"
+      :is-browsing-view="$route.name === 'browsing-view'"
       :show-sidebar="showSidebar"
       :enable-full-screen-button="['landing-view', 'playing-view', 'browsing-view']
         .includes($route.name)"
     />
+    <transition name="sidebar">
+      <Sidebar
+        v-if="showSidebar"
+        :show-sidebar="showSidebar"
+      />
+    </transition>
     <transition
       :name="transitionMode"
       mode="out-in"
     >
       <router-view
+        :style="{
+          width: showSidebar ? 'calc(100% - 76px)' : '100%',
+        }"
         :open-file-args="openFileArgs"
+        :show-sidebar="showSidebar"
         @update-side-bar="showSidebar = $event"
       />
     </transition>
@@ -27,6 +38,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ipcRenderer, Event } from 'electron';
 import Titlebar from '@/components/Titlebar.vue';
+import Sidebar from '@/components/Sidebar.vue';
 import '@/css/style.scss';
 import drag from '@/helpers/drag';
 
@@ -34,6 +46,7 @@ export default {
   name: 'Splayer',
   components: {
     Titlebar,
+    Sidebar,
   },
   data() {
     return {
@@ -46,7 +59,7 @@ export default {
     $route(to: any, from: any) {
       if (to.name === 'landing-view' && from.name === 'language-setting') this.transitionMode = 'fade';
       else this.transitionMode = '';
-      this.showSidebar = false;
+      if (to.name !== 'browsing-view') this.showSidebar = false;
     },
   },
   mounted() {
@@ -84,10 +97,17 @@ export default {
 <style lang="scss">
 // global scss
 // @import "@/css/style.scss";
-.landing-view {
-  background-image: linear-gradient(-28deg, #414141 0%, #545454 47%, #7B7B7B 100%);
+.sidebar {
+  &-enter-active {
+    transition: width 500ms ease-out;
+  }
+  &-leave-active {
+    transition: width 250ms ease-in;
+  }
+  &-enter, &-leave-to {
+    width: 0;
+  }
 }
-
 .fade {
   &-enter-active {
     transition: opacity 500ms ease-out;
@@ -95,10 +115,7 @@ export default {
   &-leave-active {
     transition: opacity 250ms ease-in;
   }
-  &-enter {
-    opacity: 0;
-  }
-  &-leave-to {
+  &-enter, &-leave-to {
     opacity: 0;
   }
 }
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 7bc0886990..5072ecdc89 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -60,6 +60,12 @@ export default {
     'browsing-header': BrowsingHeader,
     NotificationBubble,
   },
+  props: {
+    showSidebar: {
+      type: Boolean,
+      default: false,
+    },
+  },
   data() {
     return {
       quit: false,
@@ -209,6 +215,9 @@ export default {
     this.$electron.ipcRenderer.send('callMainWindowMethod', 'setSize', this.browsingSize);
     this.$electron.ipcRenderer.send('callMainWindowMethod', 'setPosition', this.browsingPos);
     this.$electron.ipcRenderer.send('callMainWindowMethod', 'setAspectRatio', [0]);
+    if (this.showSidebar) {
+      const browserWindow = this.$electron.remote.getCurrentWindow().getBrowserViews();
+    }
   },
   mounted() {
     this.menuService = new MenuService();
@@ -691,6 +700,8 @@ export default {
 
 <style scoped lang="scss">
 .browsing {
+  position: absolute;
+  right: 0;
   height: 100vh;
   width: 100vw;
   display: flex;
diff --git a/src/renderer/components/Sidebar.vue b/src/renderer/components/Sidebar.vue
new file mode 100644
index 0000000000..14ad30958d
--- /dev/null
+++ b/src/renderer/components/Sidebar.vue
@@ -0,0 +1,77 @@
+<template>
+  <div
+    class="side-bar"
+  >
+    <div class="icon-box">
+      <div @mouseup="handleSidebarIcon('bilibili')">
+        <BilibiliSidebarIcon />
+      </div>
+      <div @mouseup="handleSidebarIcon('iqiyi')">
+        <iQiyiSidebarIcon />
+      </div>
+      <div @mouseup="handleSidebarIcon('youtube')">
+        <YoutubeSidebarIcon />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import BilibiliSidebarIcon from '@/components/LandingView/BilibiliSidebarIcon.vue';
+import iQiyiSidebarIcon from '@/components/LandingView/iQiyiSidebarIcon.vue';
+import YoutubeSidebarIcon from '@/components/LandingView/YoutubeSidebarIcon.vue';
+import asyncStorage from '@/helpers/asyncStorage';
+
+export default {
+  name: 'Sidebar',
+  components: {
+    BilibiliSidebarIcon,
+    iQiyiSidebarIcon,
+    YoutubeSidebarIcon,
+  },
+  props: {
+    showSidebar: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    handleSidebarIcon(site: string) {
+      asyncStorage.get('browsingPip').then((data) => {
+        this.$store.dispatch('updatePipSize', data.pipSize || this.pipSize);
+        this.$store.dispatch('updatePipPos', data.pipPos || this.pipPos);
+        this.$electron.ipcRenderer.send('add-browsing', { size: data.pipSize || this.pipSize, position: data.pipPos || this.pipPos });
+      });
+      const url = `https://www.${site}.com`;
+      this.$electron.ipcRenderer.send('change-channel', { url });
+      if (this.$router.currentRoute.name !== 'browsing-view') this.$router.push({ name: 'browsing-view' });
+    },
+
+  },
+};
+</script>
+<style lang="scss" scoped>
+.side-bar {
+  position: absolute;
+  background-color: #39383F;
+  z-index: 0;
+  left: 0;
+  width: 76px;
+  height: 100%;
+  transition: width 100ms ease-out;
+  will-change: width;
+
+  .icon-box {
+    width: 40px;
+    margin-top: 46px;
+    margin-left: 18px;
+    margin-right: 18px;
+    display: flex;
+    flex-direction: column;
+    div {
+      width: 40px;
+      height: 40px;
+      margin-bottom: 16px;
+    }
+  }
+}
+</style>
diff --git a/src/renderer/containers/LandingView.vue b/src/renderer/containers/LandingView.vue
index 9c52624573..627b2bbb81 100644
--- a/src/renderer/containers/LandingView.vue
+++ b/src/renderer/containers/LandingView.vue
@@ -1,29 +1,5 @@
 <template>
   <div class="landing-view">
-    <div
-      :style="{
-        width: showSidebar ? '76px' : '0',
-      }"
-      class="side-bar"
-    >
-      <div class="icon-box">
-        <div @mouseup="handleSidebarIcon('bilibili')">
-          <BilibiliSidebarIcon />
-        </div>
-        <div @mouseup="handleSidebarIcon('iqiyi')">
-          <iQiyiSidebarIcon />
-        </div>
-        <div @mouseup="handleSidebarIcon('youtube')">
-          <YoutubeSidebarIcon />
-        </div>
-      </div>
-    </div>
-    <div
-      :style="{
-        width: showSidebar ? 'calc(100% - 76px)' : '100%',
-      }"
-      class="wrapper"
-    >
       <open-url
         v-show="openUrlShow"
         :open-input-url="openInputUrl"
@@ -149,7 +125,6 @@
         </div>
       </div>
       <NotificationBubble />
-    </div>
   </div>
 </template>
 
@@ -162,9 +137,6 @@ import { filePathToUrl } from '@/helpers/path';
 import { playInfoStorageService } from '@/services/storage/PlayInfoStorageService';
 import { recentPlayService } from '@/services/media/RecentPlayService';
 import Icon from '@/components/BaseIconContainer.vue';
-import BilibiliSidebarIcon from '@/components/LandingView/BilibiliSidebarIcon.vue';
-import iQiyiSidebarIcon from '@/components/LandingView/iQiyiSidebarIcon.vue';
-import YoutubeSidebarIcon from '@/components/LandingView/YoutubeSidebarIcon.vue';
 import OpenUrl from '@/components/LandingView/OpenUrl.vue';
 import NotificationBubble from '@/components/NotificationBubble.vue';
 import PlaylistItem from '@/components/LandingView/PlaylistItem.vue';
@@ -173,7 +145,6 @@ import { log } from '@/libs/Log';
 import Sagi from '@/libs/sagi';
 import { findNsfwFistFilter } from '@/libs/utils';
 import { Browsing as browsingActions } from '@/store/actionTypes';
-import asyncStorage from '@/helpers/asyncStorage';
 
 Vue.component('PlaylistItem', PlaylistItem);
 Vue.component('VideoItem', VideoItem);
@@ -182,9 +153,6 @@ export default {
   name: 'LandingView',
   components: {
     Icon,
-    BilibiliSidebarIcon,
-    iQiyiSidebarIcon,
-    YoutubeSidebarIcon,
     NotificationBubble,
     'open-url': OpenUrl,
   },
@@ -376,18 +344,6 @@ export default {
     move(steps: number) {
       return steps * (this.thumbnailWidth + this.marginRight);
     },
-    handleSidebarIcon(site: string) {
-      asyncStorage.get('browsingPip').then((data) => {
-        this.$store.dispatch('updatePipSize', data.pipSize || this.pipSize);
-        this.$store.dispatch('updatePipPos', data.pipPos || this.pipPos);
-        this.$electron.ipcRenderer.send('add-browsing', { size: data.pipSize || this.pipSize, position: data.pipPos || this.pipPos });
-      });
-      const url = `https://www.${site}.com`;
-      this.$electron.ipcRenderer.send('change-channel', { url });
-      this.$router.push({
-        name: 'browsing-view',
-      });
-    },
     handleBrowsingOpen(url: string) {
       this.updateInitialUrl(url);
       this.$router.push({
@@ -472,33 +428,6 @@ export default {
 $themeColor-Light: white;
 
 .landing-view {
-  height: 100vh;
-  width: 100vw;
-}
-.side-bar {
-  position: absolute;
-  background-color: #39383F;
-  z-index: 0;
-  left: 0;
-  height: 100%;
-  transition: width 100ms ease-out;
-  will-change: width;
-
-  .icon-box {
-    width: 40px;
-    margin-top: 46px;
-    margin-left: 18px;
-    margin-right: 18px;
-    display: flex;
-    flex-direction: column;
-    div {
-      width: 40px;
-      height: 40px;
-      margin-bottom: 16px;
-    }
-  }
-}
-.wrapper {
   overflow: hidden;
   will-change: width;
   transition-property: width;

From ff30131a52f397c8d08a5fede08a69158c2a6eca Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Mon, 2 Sep 2019 19:37:14 +0800
Subject: [PATCH 034/123] feat(sidebar): browsingview

---
 src/renderer/components/Sidebar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/Sidebar.vue b/src/renderer/components/Sidebar.vue
index 14ad30958d..c58511d032 100644
--- a/src/renderer/components/Sidebar.vue
+++ b/src/renderer/components/Sidebar.vue
@@ -42,7 +42,7 @@ export default {
         this.$electron.ipcRenderer.send('add-browsing', { size: data.pipSize || this.pipSize, position: data.pipPos || this.pipPos });
       });
       const url = `https://www.${site}.com`;
-      this.$electron.ipcRenderer.send('change-channel', { url });
+      this.$electron.ipcRenderer.send('change-channel', { url, sidebar: this.showSidebar });
       if (this.$router.currentRoute.name !== 'browsing-view') this.$router.push({ name: 'browsing-view' });
     },
 

From fb914365e964bb9f6c1c2250aa2ff37a2e39564a Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Tue, 3 Sep 2019 12:37:34 +0800
Subject: [PATCH 035/123] feat(browsingview): support dragging pip window with
 osx-mouse-cocoa

---
 package.json                            |  2 ++
 scripts/post-install.js                 |  4 ++-
 src/main/helpers/mouse.ts               | 14 ++------
 src/main/index.js                       | 11 ++++++-
 src/renderer/components/BrowsingPip.vue | 44 +++++++++++++++++++++----
 static/pip/preload.js                   | 27 +++++----------
 static/pip/titlebarPreload.js           | 18 +++++++++-
 7 files changed, 81 insertions(+), 39 deletions(-)

diff --git a/package.json b/package.json
index 66b376d231..74fc6008ac 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
     "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
     "rebuild:win-mouse": "electron-rebuild -f -e node_modules/@chiflix/electron -w win-mouse",
+    "rebuild:osx-mouse-cocoa": "electron-rebuild -f -e node_modules/@chiflix/electron -w osx-mouse-cocoa",
     "test": "npm run unit && npm run e2e",
     "unit": "karma start test/unit/karma.conf.js",
     "postinstall": "node ./scripts/post-install.js"
@@ -89,6 +90,7 @@
     "winston-daily-rotate-file": "^3.9.0"
   },
   "optionalDependencies": {
+    "osx-mouse-cocoa": "github:Pat1enceLos/osx-mouse-cocoa",
     "win-mouse": "1.3.0"
   },
   "devDependencies": {
diff --git a/scripts/post-install.js b/scripts/post-install.js
index c146bc4612..a728cce16b 100644
--- a/scripts/post-install.js
+++ b/scripts/post-install.js
@@ -7,11 +7,13 @@ require('events').EventEmitter.prototype._maxListeners = 10000;
 const commands = [
   'npx rimraf node_modules/**/.git',
   'npm run lint:fix',
+  'npm run install-app-deps',
 ];
 
 if (process.platform === 'win32') {
-  commands.push('npm run install-app-deps');
   commands.push('npm run rebuild:win-mouse');
+} else {
+  commands.push('npm run rebuild:osx-mouse-cocoa');
 }
 
 exec(commands.join('&&'), (error, stdout) => {
diff --git a/src/main/helpers/mouse.ts b/src/main/helpers/mouse.ts
index 422b2afb02..bbede8f3a1 100644
--- a/src/main/helpers/mouse.ts
+++ b/src/main/helpers/mouse.ts
@@ -4,7 +4,7 @@ interface IMouse {
   dispose(): void,
 }
 
-class WinMouse implements IMouse {
+class Mouse implements IMouse {
   private mouse: {
     on(channel: string, callback: (x: number, y: number) => void): void,
     off(channel: string, callback?: (x: number, y: number) => void): void,
@@ -13,7 +13,7 @@ class WinMouse implements IMouse {
 
   public constructor() {
     try {
-      const mouseConstructor = require('win-mouse'); //eslint-disable-line
+      const mouseConstructor = process.platform === 'win32' ? require('win-mouse') : require('osx-mouse-cocoa'); //eslint-disable-line
       this.mouse = mouseConstructor();
     } catch (ex) {
       console.error(ex);
@@ -34,14 +34,4 @@ class WinMouse implements IMouse {
   }
 }
 
-class FakeMouse implements IMouse {
-  public on() {} //eslint-disable-line
-
-  public off() {} //eslint-disable-line
-
-  public dispose() {} //eslint-disable-line
-}
-
-const Mouse = process.platform === 'win32' ? WinMouse : FakeMouse;
-
 export const mouse: IMouse = new Mouse();
diff --git a/src/main/index.js b/src/main/index.js
index 205ec1b0d6..6f8190c052 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -608,6 +608,11 @@ function registerMainWindowEvent(mainWindow) {
         + 'document.querySelector(".titlebarFull").style.display = "block";');
     }
   });
+  ipcMain.on('update-mouse-info', (evt, args) => {
+    if (browsingWindow && browsingWindow.isFocused()) {
+      browsingWindow.send('update-mouse-info', args);
+    }
+  });
   ipcMain.on('mouseup', (evt, type) => {
     switch (type) {
       case 'close':
@@ -989,7 +994,11 @@ function createMainWindow(openDialog, playlistId) {
 ['left-drag', 'left-up'].forEach((channel) => {
   mouse.on(channel, (...args) => {
     if (!mainWindow || mainWindow.webContents.isDestroyed()) return;
-    mainWindow.webContents.send(`mouse-${channel}`, ...args);
+    if (process.platform === 'win32') {
+      BrowserWindow.getFocusedWindow().webContents.send(`mouse-${channel}`, ...args);
+    } else if (browsingWindow && browsingWindow.isFocused()) {
+      browsingWindow.webContents.send(`mouse-${channel}`, ...args);
+    }
   });
 });
 
diff --git a/src/renderer/components/BrowsingPip.vue b/src/renderer/components/BrowsingPip.vue
index a14f34ad03..fdd8fcd838 100644
--- a/src/renderer/components/BrowsingPip.vue
+++ b/src/renderer/components/BrowsingPip.vue
@@ -1,10 +1,5 @@
 <template>
-  <div
-    :style="{
-      webkitAppRegion: isDarwin ? 'drag' : 'no-drag',
-    }"
-    class="pip"
-  />
+  <div class="pip" />
 </template>
 
 <script lang="ts">
@@ -20,6 +15,9 @@ export default {
       supportedRecordHost: ['www.youtube.com', 'www.bilibili.com', 'www.iqiyi.com'],
       menuService: null,
       asyncTasksDone: false,
+      windowSize: [],
+      offset: [],
+      movePos: [],
     };
   },
   computed: {
@@ -28,6 +26,34 @@ export default {
     },
   },
   mounted() {
+    window.addEventListener('focus', () => {
+      const cursorPoint = electron.screen.getCursorScreenPoint();
+      const windowPos = electron.remote.getCurrentWindow().getPosition();
+      this.offset = [cursorPoint.x - windowPos[0], cursorPoint.y - windowPos[1]];
+      if (this.getRatio() !== 1) {
+        this.windowSize = electron.remote.getCurrentWindow().getSize();
+      }
+    });
+    electron.ipcRenderer.on('update-mouse-info', (evt: Event, args: { windowSize: number[] | null, offset: number[]}) => {
+      this.offset = args.offset;
+      this.windowSize = args.windowSize;
+    });
+    electron.ipcRenderer.on('mouse-left-up', () => {
+      this.offset = null;
+      this.windowSize = null;
+    });
+    electron.ipcRenderer.on('mouse-left-drag', (evt: Event, x: number, y: number) => {
+      if (!this.offset) return;
+      x = Math.round((x / this.getRatio()) - this.offset[0]);
+      y = Math.round((y / this.getRatio()) - this.offset[1]);
+      if (this.windowSize) {
+        electron.ipcRenderer.send('callBrowsingWindowMethod', 'setBounds', [{
+          x, y, width: this.windowSize[0], height: this.windowSize[1],
+        }]);
+      } else {
+        electron.ipcRenderer.send('callBrowsingWindowMethod', 'setPosition', [x, y]);
+      }
+    });
     this.menuService = new MenuService();
     electron.remote.getCurrentWindow().addListener('enter-html-full-screen', () => {
       electron.ipcRenderer.send('mouseup', 'full');
@@ -70,6 +96,11 @@ export default {
       }
     });
   },
+  methods: {
+    getRatio() {
+      return process.platform === 'win32' ? window.devicePixelRatio || 1 : 1;
+    },
+  },
 };
 </script>
 
@@ -79,5 +110,6 @@ export default {
   height: 36px;
   position: absolute;
   top: 0;
+  -webkit-app-region: no-drag;
 }
 </style>
diff --git a/static/pip/preload.js b/static/pip/preload.js
index 61ccb8fbe1..5b5a68ae2d 100644
--- a/static/pip/preload.js
+++ b/static/pip/preload.js
@@ -2,11 +2,10 @@
 // eslint-disable-next-line no-console
 console.log('preloaded~~~~~~~');
 const { ipcRenderer, remote } = require('electron');
-const mouse = process.platform === 'win32' ? require('win-mouse')() : null;
 
 let mousedown = false;
 let isDragging = false;
-let mousedownPos = null;
+let offset = null;
 let windowSize = null;
 let pipTimer = 0;
 function sendToHost(channel, message) {
@@ -54,30 +53,21 @@ document.addEventListener('DOMContentLoaded', () => {
   }, true);
   window.addEventListener('mousedown', (evt) => {
     mousedown = true;
-    mousedownPos = [evt.clientX, evt.clientY];
+    offset = [evt.clientX, evt.clientY];
     if (getRatio() !== 1) {
       windowSize = remote.getCurrentWindow().getSize();
     }
+    if (!pipBtns) {
+      sendToHost('update-mouse-info', { offset, windowSize });
+    }
   }, true);
   window.addEventListener('mouseup', (evt) => {
     if (isDragging && !pipBtns) evt.stopImmediatePropagation();
     mousedown = false;
-    mousedownPos = null;
+    offset = null;
     windowSize = null;
+    if (!pipBtns) sendToHost('update-mouse-info', { offset, windowSize });
   }, true);
-  if (mouse) {
-    mouse.on('left-drag', (x, y) => {
-      sendToHost('mousemove', 'isMoving');
-      isDragging = true;
-      if (mousedownPos) {
-        sendToHost('left-drag', {
-          windowSize,
-          x: Math.round(x / getRatio() - mousedownPos[0]),
-          y: Math.round(y / getRatio() - mousedownPos[1]),
-        });
-      }
-    });
-  }
   window.addEventListener('mousemove', (evt) => {
     if (!pipBtns && remote.getCurrentWindow()
       && remote.getCurrentWindow().getBrowserViews().length > 1) {
@@ -89,8 +79,9 @@ document.addEventListener('DOMContentLoaded', () => {
   window.addEventListener('click', (evt) => {
     if (isDragging) evt.stopImmediatePropagation();
     isDragging = false;
-    mousedownPos = null;
+    offset = null;
     windowSize = null;
+    if (!pipBtns) sendToHost('update-mouse-info', { offset, windowSize });
   }, true);
   window.addEventListener('drop', (evt) => {
     evt.preventDefault();
diff --git a/static/pip/titlebarPreload.js b/static/pip/titlebarPreload.js
index a039257a1a..0503f0a3bf 100644
--- a/static/pip/titlebarPreload.js
+++ b/static/pip/titlebarPreload.js
@@ -3,7 +3,11 @@ console.log('titlebar-preloaded~~~~~~~');
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { ipcRenderer, remote } = require('electron');
 const isDarwin = process.platform === 'darwin';
-
+let offset = null;
+let windowSize = null;
+function getRatio() {
+  return window.devicePixelRatio || 1;
+}
 document.addEventListener('DOMContentLoaded', () => {
   const titlebar = document.querySelector('.titlebar');
   const content = document.querySelector('.content');
@@ -63,6 +67,18 @@ document.addEventListener('DOMContentLoaded', () => {
       });
     }
   }
+  window.addEventListener('mousedown', (evt) => {
+    offset = [evt.clientX, evt.clientY];
+    if (getRatio() !== 1) {
+      windowSize = remote.getCurrentWindow().getSize();
+    }
+    if ([content, titlebar].includes(evt.target)) ipcRenderer.send('update-mouse-info', { offset, windowSize });
+  }, true);
+  window.addEventListener('mouseup', () => {
+    offset = null;
+    windowSize = null;
+    ipcRenderer.send('update-mouse-info', { offset, windowSize });
+  });
   window.addEventListener('keydown', (e) => {
     ipcRenderer.send('key-events', e.keyCode);
   });

From 19f8b5b51c1b17598b64eb91ae3499ba6f63f425 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Tue, 3 Sep 2019 14:09:41 +0800
Subject: [PATCH 036/123] style(browsing): eslint warning

---
 src/renderer/components/BrowsingView.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 5072ecdc89..1c0c7f4d3c 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -215,9 +215,6 @@ export default {
     this.$electron.ipcRenderer.send('callMainWindowMethod', 'setSize', this.browsingSize);
     this.$electron.ipcRenderer.send('callMainWindowMethod', 'setPosition', this.browsingPos);
     this.$electron.ipcRenderer.send('callMainWindowMethod', 'setAspectRatio', [0]);
-    if (this.showSidebar) {
-      const browserWindow = this.$electron.remote.getCurrentWindow().getBrowserViews();
-    }
   },
   mounted() {
     this.menuService = new MenuService();

From c55d2cb2a2608bca5799108db5167ac11c2bf178 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Tue, 3 Sep 2019 14:55:49 +0800
Subject: [PATCH 037/123] fix(browsingview): fix some error about windows drag

---
 src/main/index.js                       |  4 ++--
 src/renderer/components/BrowsingPip.vue | 21 +++++++++++----------
 static/pip/preload.js                   |  3 ++-
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index 61e9789ea1..e9e285e7ab 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -996,9 +996,9 @@ function createMainWindow(openDialog, playlistId) {
 
 ['left-drag', 'left-up'].forEach((channel) => {
   mouse.on(channel, (...args) => {
-    if (!mainWindow || mainWindow.webContents.isDestroyed()) return;
     if (process.platform === 'win32') {
-      BrowserWindow.getFocusedWindow().webContents.send(`mouse-${channel}`, ...args);
+      const focusedWindow = BrowserWindow.getFocusedWindow();
+      if (focusedWindow) focusedWindow.send(`mouse-${channel}`, ...args);
     } else if (browsingWindow && browsingWindow.isFocused()) {
       browsingWindow.webContents.send(`mouse-${channel}`, ...args);
     }
diff --git a/src/renderer/components/BrowsingPip.vue b/src/renderer/components/BrowsingPip.vue
index fdd8fcd838..5f314fca0e 100644
--- a/src/renderer/components/BrowsingPip.vue
+++ b/src/renderer/components/BrowsingPip.vue
@@ -26,14 +26,6 @@ export default {
     },
   },
   mounted() {
-    window.addEventListener('focus', () => {
-      const cursorPoint = electron.screen.getCursorScreenPoint();
-      const windowPos = electron.remote.getCurrentWindow().getPosition();
-      this.offset = [cursorPoint.x - windowPos[0], cursorPoint.y - windowPos[1]];
-      if (this.getRatio() !== 1) {
-        this.windowSize = electron.remote.getCurrentWindow().getSize();
-      }
-    });
     electron.ipcRenderer.on('update-mouse-info', (evt: Event, args: { windowSize: number[] | null, offset: number[]}) => {
       this.offset = args.offset;
       this.windowSize = args.windowSize;
@@ -43,10 +35,19 @@ export default {
       this.windowSize = null;
     });
     electron.ipcRenderer.on('mouse-left-drag', (evt: Event, x: number, y: number) => {
-      if (!this.offset) return;
+      if (!this.offset) {
+        const cursorPoint = electron.screen.getCursorScreenPoint();
+        const windowPos = electron.remote.getCurrentWindow().getPosition();
+        this.offset = [cursorPoint.x - windowPos[0], cursorPoint.y - windowPos[1]];
+        if (this.getRatio() !== 1) {
+          this.windowSize = electron.remote.getCurrentWindow().getSize();
+        }
+      }
       x = Math.round((x / this.getRatio()) - this.offset[0]);
       y = Math.round((y / this.getRatio()) - this.offset[1]);
-      if (this.windowSize) {
+      if (this.isDarwin) {
+        electron.ipcRenderer.send('callBrowsingWindowMethod', 'setPosition', [x, y]);
+      } else if (this.windowSize) {
         electron.ipcRenderer.send('callBrowsingWindowMethod', 'setBounds', [{
           x, y, width: this.windowSize[0], height: this.windowSize[1],
         }]);
diff --git a/static/pip/preload.js b/static/pip/preload.js
index 5b5a68ae2d..942fa9d379 100644
--- a/static/pip/preload.js
+++ b/static/pip/preload.js
@@ -57,7 +57,8 @@ document.addEventListener('DOMContentLoaded', () => {
     if (getRatio() !== 1) {
       windowSize = remote.getCurrentWindow().getSize();
     }
-    if (!pipBtns) {
+    if (!pipBtns && remote.getCurrentWindow()
+      && remote.getCurrentWindow().getBrowserViews().length > 1) {
       sendToHost('update-mouse-info', { offset, windowSize });
     }
   }, true);

From 3fc71b2beb4d09106eae4db9606e92673de8b28b Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Tue, 3 Sep 2019 16:03:15 +0800
Subject: [PATCH 038/123] feat(browsing): ui structure adjustment

---
 src/main/index.js                             |   4 +-
 .../assets/icon/back-default-icon.svg         |   2 +-
 .../assets/icon/backDisabled-default-icon.svg |   2 +-
 .../assets/icon/forward-default-icon.svg      |   2 +-
 .../icon/forwardDisabled-default-icon.svg     |   2 +-
 .../assets/icon/pageRefresh-default-icon.svg  |   2 +-
 src/renderer/assets/icon/pip-default-icon.svg |   2 +-
 .../assets/icon/pipDisabled-default-icon.svg  |   2 +-
 src/renderer/components/BrowsingView.vue      |   1 +
 .../BrowsingView/BrowsingControl.vue          |  41 ++--
 .../BrowsingView/BrowsingHeader.vue           |  53 ++---
 .../components/BrowsingView/BrowsingInput.vue |  33 ++-
 .../components/BrowsingView/BrowsingPip.vue   |  49 ++++
 .../components/LandingView/SidebarIcon.vue    |   6 +-
 src/renderer/components/Titlebar.vue          |   6 +
 src/renderer/containers/LandingView.vue       | 218 +++++++++---------
 16 files changed, 230 insertions(+), 195 deletions(-)
 create mode 100644 src/renderer/components/BrowsingView/BrowsingPip.vue

diff --git a/src/main/index.js b/src/main/index.js
index 87cf6d07d5..43575675e9 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -526,9 +526,9 @@ function registerMainWindowEvent(mainWindow) {
     }, 150);
     view.setBounds({
       x: args.sidebar ? 76 : 0,
-      y: 36,
+      y: 40,
       width: args.sidebar ? mainWindow.getSize()[0] - 76 : mainWindow.getSize()[0],
-      height: mainWindow.getSize()[1] - 36,
+      height: mainWindow.getSize()[1] - 40,
     });
     view.setAutoResize({
       width: true, height: true,
diff --git a/src/renderer/assets/icon/back-default-icon.svg b/src/renderer/assets/icon/back-default-icon.svg
index 191e088410..01a306ca22 100644
--- a/src/renderer/assets/icon/back-default-icon.svg
+++ b/src/renderer/assets/icon/back-default-icon.svg
@@ -1,6 +1,6 @@
 <svg width="15px" height="14px" viewBox="0 0 15 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.7">
-        <g id="browseing" transform="translate(-81.000000, -11.000000)" fill="#FFFFFF">
+        <g id="browseing" transform="translate(-81.000000, -11.000000)" fill="#BBBACC">
             <g id="back" transform="translate(81.000000, 11.000000)">
                 <path d="M2.5034271,7.75214251 L6.53829467,12.6741045 C6.77841425,12.9670161 6.76245981,13.3929889 6.50110221,13.6671181 L6.39621564,13.7771301 C6.12143551,14.0653377 5.66504376,14.0762228 5.37683614,13.8014427 C5.35550942,13.7811096 5.33544922,13.7594883 5.31676839,13.7367003 L0.362980511,7.69378681 C0.345414441,7.67860066 0.32841789,7.6624305 0.312064596,7.64527808 L0.207178032,7.53526609 C0.0653333835,7.38649001 -0.00422832962,7.19298876 0.000198711274,7.00030653 C-0.00422832963,6.80762431 0.0653333835,6.61412306 0.207178032,6.46534698 L0.312064596,6.35533499 C0.32841789,6.33818257 0.345414441,6.32201241 0.362980511,6.30682626 L5.31676839,0.263912758 C5.33544922,0.241124813 5.35550942,0.219503464 5.37683614,0.199170357 C5.66504376,-0.0756097699 6.12143551,-0.064724629 6.39621564,0.223482999 L6.50110221,0.333494986 C6.76245981,0.607624187 6.77841425,1.03359697 6.53829467,1.32650856 L2.52743897,6.21917951 L14.2381711,6.21917951 C14.6614871,6.21917951 15.0046526,6.56234497 15.0046526,6.98566101 C15.0046526,7.40897705 14.6614871,7.75214251 14.2381711,7.75214251 L2.5034271,7.75214251 Z" id="形状结合"></path>
             </g>
diff --git a/src/renderer/assets/icon/backDisabled-default-icon.svg b/src/renderer/assets/icon/backDisabled-default-icon.svg
index c1a62a778e..dd008368aa 100644
--- a/src/renderer/assets/icon/backDisabled-default-icon.svg
+++ b/src/renderer/assets/icon/backDisabled-default-icon.svg
@@ -1,6 +1,6 @@
 <svg width="15px" height="14px" viewBox="0 0 15 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.15">
-        <g id="browseing" transform="translate(-81.000000, -11.000000)" fill="#FFFFFF">
+        <g id="browseing" transform="translate(-81.000000, -11.000000)" fill="#BBBACC">
             <g id="back" transform="translate(81.000000, 11.000000)">
                 <path d="M2.5034271,7.75214251 L6.53829467,12.6741045 C6.77841425,12.9670161 6.76245981,13.3929889 6.50110221,13.6671181 L6.39621564,13.7771301 C6.12143551,14.0653377 5.66504376,14.0762228 5.37683614,13.8014427 C5.35550942,13.7811096 5.33544922,13.7594883 5.31676839,13.7367003 L0.362980511,7.69378681 C0.345414441,7.67860066 0.32841789,7.6624305 0.312064596,7.64527808 L0.207178032,7.53526609 C0.0653333835,7.38649001 -0.00422832962,7.19298876 0.000198711274,7.00030653 C-0.00422832963,6.80762431 0.0653333835,6.61412306 0.207178032,6.46534698 L0.312064596,6.35533499 C0.32841789,6.33818257 0.345414441,6.32201241 0.362980511,6.30682626 L5.31676839,0.263912758 C5.33544922,0.241124813 5.35550942,0.219503464 5.37683614,0.199170357 C5.66504376,-0.0756097699 6.12143551,-0.064724629 6.39621564,0.223482999 L6.50110221,0.333494986 C6.76245981,0.607624187 6.77841425,1.03359697 6.53829467,1.32650856 L2.52743897,6.21917951 L14.2381711,6.21917951 C14.6614871,6.21917951 15.0046526,6.56234497 15.0046526,6.98566101 C15.0046526,7.40897705 14.6614871,7.75214251 14.2381711,7.75214251 L2.5034271,7.75214251 Z" id="形状结合"></path>
             </g>
diff --git a/src/renderer/assets/icon/forward-default-icon.svg b/src/renderer/assets/icon/forward-default-icon.svg
index 55732794ea..ba36a7e021 100644
--- a/src/renderer/assets/icon/forward-default-icon.svg
+++ b/src/renderer/assets/icon/forward-default-icon.svg
@@ -1,6 +1,6 @@
 <svg width="15px" height="14px" viewBox="0 0 15 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.7">
-        <g id="browseing" transform="translate(-116.000000, -11.000000)" fill="#FFFFFF">
+        <g id="browseing" transform="translate(-116.000000, -11.000000)" fill="#BBBACC">
             <g id="back" transform="translate(123.500000, 18.000000) scale(-1, 1) translate(-123.500000, -18.000000) translate(116.000000, 11.000000)">
                 <path d="M2.5034271,7.75214251 L6.53829467,12.6741045 C6.77841425,12.9670161 6.76245981,13.3929889 6.50110221,13.6671181 L6.39621564,13.7771301 C6.12143551,14.0653377 5.66504376,14.0762228 5.37683614,13.8014427 C5.35550942,13.7811096 5.33544922,13.7594883 5.31676839,13.7367003 L0.362980511,7.69378681 C0.345414441,7.67860066 0.32841789,7.6624305 0.312064596,7.64527808 L0.207178032,7.53526609 C0.0653333835,7.38649001 -0.00422832962,7.19298876 0.000198711274,7.00030653 C-0.00422832963,6.80762431 0.0653333835,6.61412306 0.207178032,6.46534698 L0.312064596,6.35533499 C0.32841789,6.33818257 0.345414441,6.32201241 0.362980511,6.30682626 L5.31676839,0.263912758 C5.33544922,0.241124813 5.35550942,0.219503464 5.37683614,0.199170357 C5.66504376,-0.0756097699 6.12143551,-0.064724629 6.39621564,0.223482999 L6.50110221,0.333494986 C6.76245981,0.607624187 6.77841425,1.03359697 6.53829467,1.32650856 L2.52743897,6.21917951 L14.2381711,6.21917951 C14.6614871,6.21917951 15.0046526,6.56234497 15.0046526,6.98566101 C15.0046526,7.40897705 14.6614871,7.75214251 14.2381711,7.75214251 L2.5034271,7.75214251 Z" id="形状结合"></path>
             </g>
diff --git a/src/renderer/assets/icon/forwardDisabled-default-icon.svg b/src/renderer/assets/icon/forwardDisabled-default-icon.svg
index 81c3a5b2d9..97e349cfad 100644
--- a/src/renderer/assets/icon/forwardDisabled-default-icon.svg
+++ b/src/renderer/assets/icon/forwardDisabled-default-icon.svg
@@ -1,6 +1,6 @@
 <svg width="15px" height="14px" viewBox="0 0 15 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.15">
-        <g id="browseing" transform="translate(-116.000000, -11.000000)" fill="#FFFFFF">
+        <g id="browseing" transform="translate(-116.000000, -11.000000)" fill="#BBBACC">
             <g id="back" transform="translate(123.500000, 18.000000) scale(-1, 1) translate(-123.500000, -18.000000) translate(116.000000, 11.000000)">
                 <path d="M2.5034271,7.75214251 L6.53829467,12.6741045 C6.77841425,12.9670161 6.76245981,13.3929889 6.50110221,13.6671181 L6.39621564,13.7771301 C6.12143551,14.0653377 5.66504376,14.0762228 5.37683614,13.8014427 C5.35550942,13.7811096 5.33544922,13.7594883 5.31676839,13.7367003 L0.362980511,7.69378681 C0.345414441,7.67860066 0.32841789,7.6624305 0.312064596,7.64527808 L0.207178032,7.53526609 C0.0653333835,7.38649001 -0.00422832962,7.19298876 0.000198711274,7.00030653 C-0.00422832963,6.80762431 0.0653333835,6.61412306 0.207178032,6.46534698 L0.312064596,6.35533499 C0.32841789,6.33818257 0.345414441,6.32201241 0.362980511,6.30682626 L5.31676839,0.263912758 C5.33544922,0.241124813 5.35550942,0.219503464 5.37683614,0.199170357 C5.66504376,-0.0756097699 6.12143551,-0.064724629 6.39621564,0.223482999 L6.50110221,0.333494986 C6.76245981,0.607624187 6.77841425,1.03359697 6.53829467,1.32650856 L2.52743897,6.21917951 L14.2381711,6.21917951 C14.6614871,6.21917951 15.0046526,6.56234497 15.0046526,6.98566101 C15.0046526,7.40897705 14.6614871,7.75214251 14.2381711,7.75214251 L2.5034271,7.75214251 Z" id="形状结合"></path>
             </g>
diff --git a/src/renderer/assets/icon/pageRefresh-default-icon.svg b/src/renderer/assets/icon/pageRefresh-default-icon.svg
index be5b674741..88dd7cc223 100644
--- a/src/renderer/assets/icon/pageRefresh-default-icon.svg
+++ b/src/renderer/assets/icon/pageRefresh-default-icon.svg
@@ -3,7 +3,7 @@
     <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
     <desc>Created with Sketch.</desc>
     <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.7">
-        <g id="browseing" transform="translate(-340.000000, -323.000000)" fill="#FFFFFF" fill-rule="nonzero">
+        <g id="browseing" transform="translate(-340.000000, -323.000000)" fill="#BBBACC" fill-rule="nonzero">
             <g id="control-bar" transform="translate(238.000000, 300.000000)">
                 <g id="icon-refresh" transform="translate(98.000000, 19.000000)">
                     <path d="M19.9275636,23.9920296 C20.3650254,23.4227245 20.2581454,22.6065787 19.6888403,22.1691168 C19.1195352,21.7316549 18.3033893,21.838535 17.8659275,22.4078401 C16.98761,23.5508667 16.3399248,24.4093268 15.9201976,24.9870317 C15.70106,25.2886488 15.5406853,25.5182327 15.433665,25.684841 C15.3602796,25.7990867 15.3053307,25.8928755 15.2591332,25.9907264 C15.2027547,26.105821 15.2027547,26.105821 15.1306023,26.4247782 C15.0986066,26.7012347 15.0986066,26.7012347 15.3087888,27.266275 C15.8834144,27.8466713 15.8834144,27.8466713 16.4822263,27.8963696 C22.760792,27.6355905 27.8,22.2689278 27.8,15.9070924 C27.8,12.4110703 26.2702442,9.16081599 23.6658784,6.9325943 C21.5446155,5.11770182 18.8489726,4.10249962 16,4.10249962 C9.48291266,4.10249962 4.2,9.38772305 4.2,15.9070924 C4.2,18.5715924 5.08653001,21.1044742 6.69120849,23.1623351 C7.83714485,24.631899 9.3164956,25.8144882 11.0052919,26.6047987 C11.6555786,26.9091151 12.4294372,26.6286508 12.7337536,25.9783642 C13.03807,25.3280775 12.7576057,24.5542189 12.107319,24.2499025 C10.7908372,23.633825 9.63608734,22.7107209 8.74153335,21.563533 C7.49000766,19.9585599 6.8,17.9871571 6.8,15.9070924 C6.8,10.8234089 10.9191076,6.70249962 16,6.70249962 C18.2232077,6.70249962 20.320979,7.49253827 21.9756109,8.90819441 C24.0085468,10.6475168 25.2,13.1789836 25.2,15.9070924 C25.2,19.7782293 22.8118095,23.1835609 19.4592128,24.603186 C19.6070218,24.4097288 19.7631448,24.2060013 19.9275636,23.9920296 Z" id="refresh" transform="translate(16.000000, 15.999435) rotate(-126.000000) translate(-16.000000, -15.999435) "></path>
diff --git a/src/renderer/assets/icon/pip-default-icon.svg b/src/renderer/assets/icon/pip-default-icon.svg
index 77da00f98e..643a634875 100644
--- a/src/renderer/assets/icon/pip-default-icon.svg
+++ b/src/renderer/assets/icon/pip-default-icon.svg
@@ -3,7 +3,7 @@
     <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
     <desc>Created with Sketch.</desc>
     <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.7">
-        <g id="icon-pictureInPicture" transform="translate(-1.000000, -5.000000)" fill="#FFFFFF" fill-rule="nonzero">
+        <g id="icon-pictureInPicture" transform="translate(-1.000000, -5.000000)" fill="#BBBACC" fill-rule="nonzero">
             <path d="M3.43,5 L28.57,5 C29.9120519,5 31,6.08794806 31,7.43 L31,25.07 C31,26.4120519 29.9120519,27.5 28.57,27.5 L3.43,27.5 C2.08794806,27.5 1,26.4120519 1,25.07 L1,7.43 C1,6.08794806 2.08794806,5 3.43,5 Z M3.5,8.3 L3.5,24.2 C3.5,24.6418278 3.8581722,25 4.3,25 L27.7,25 C28.1418278,25 28.5,24.6418278 28.5,24.2 L28.5,8.3 C28.5,7.8581722 28.1418278,7.5 27.7,7.5 L4.3,7.5 C3.8581722,7.5 3.5,7.8581722 3.5,8.3 Z M14.6696026,14.5395022 L25.4438391,14.5395022 C25.8911898,14.5395022 26.2538391,14.9021515 26.2538391,15.3495022 L26.2538391,21.7295022 C26.2538391,22.1768528 25.8911898,22.5395022 25.4438391,22.5395022 L14.6696026,22.5395022 C14.222252,22.5395022 13.8596026,22.1768528 13.8596026,21.7295022 L13.8596026,15.3495022 C13.8596026,14.9021515 14.222252,14.5395022 14.6696026,14.5395022 Z" id="pictureInPicture"></path>
         </g>
     </g>
diff --git a/src/renderer/assets/icon/pipDisabled-default-icon.svg b/src/renderer/assets/icon/pipDisabled-default-icon.svg
index 7db10cc8c8..44400f2d8f 100644
--- a/src/renderer/assets/icon/pipDisabled-default-icon.svg
+++ b/src/renderer/assets/icon/pipDisabled-default-icon.svg
@@ -3,7 +3,7 @@
     <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
     <desc>Created with Sketch.</desc>
     <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.15">
-        <g id="browseing" transform="translate(-431.000000, -324.000000)" fill="#FFFFFF">
+        <g id="browseing" transform="translate(-431.000000, -324.000000)" fill="#BBBACC">
             <g id="control-bar" transform="translate(238.000000, 300.000000)">
                 <g id="icon-pictureInPicture" transform="translate(192.000000, 19.000000)">
                     <path d="M3.43,5 L28.57,5 C29.9120519,5 31,6.08794806 31,7.43 L31,25.07 C31,26.4120519 29.9120519,27.5 28.57,27.5 L3.43,27.5 C2.08794806,27.5 1,26.4120519 1,25.07 L1,7.43 C1,6.08794806 2.08794806,5 3.43,5 Z M3.5,8.3 L3.5,24.2 C3.5,24.6418278 3.8581722,25 4.3,25 L27.7,25 C28.1418278,25 28.5,24.6418278 28.5,24.2 L28.5,8.3 C28.5,7.8581722 28.1418278,7.5 27.7,7.5 L4.3,7.5 C3.8581722,7.5 3.5,7.8581722 3.5,8.3 Z M14.6696026,14.5395022 L25.4438391,14.5395022 C25.8911898,14.5395022 26.2538391,14.9021515 26.2538391,15.3495022 L26.2538391,21.7295022 C26.2538391,22.1768528 25.8911898,22.5395022 25.4438391,22.5395022 L14.6696026,22.5395022 C14.222252,22.5395022 13.8596026,22.1768528 13.8596026,21.7295022 L13.8596026,15.3495022 C13.8596026,14.9021515 14.222252,14.5395022 14.6696026,14.5395022 Z" id="pictureInPicture"></path>
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 1c0c7f4d3c..f25ba8f001 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -699,6 +699,7 @@ export default {
 .browsing {
   position: absolute;
   right: 0;
+  border-top-left-radius: 4px;
   height: 100vh;
   width: 100vw;
   display: flex;
diff --git a/src/renderer/components/BrowsingView/BrowsingControl.vue b/src/renderer/components/BrowsingView/BrowsingControl.vue
index 737c44cccd..051120e7a0 100644
--- a/src/renderer/components/BrowsingView/BrowsingControl.vue
+++ b/src/renderer/components/BrowsingView/BrowsingControl.vue
@@ -1,11 +1,17 @@
 <template>
   <div
     :style="{
-      width: isDarwin ? '114px' : '110px',
-      margin: isDarwin ? 'auto 0 auto 70px' : 'auto 0 auto 5px',
+      width: isDarwin ? '113px' : '110px',
     }"
     class="browsing-control"
   >
+    <SidebarIcon
+      @mouseover.native="mouseoverSidebar = true"
+      @mouseout.native="mouseoverSidebar = false"
+      @mouseup.native="handleSidebar"
+      :mouseover="mouseoverSidebar"
+      class="sidebar no-drag"
+    />
     <Icon
       ref="back"
       :type="backType"
@@ -24,23 +30,17 @@
       @mouseup.native="handleUrlForward"
       class="forward-icon"
     />
-    <Icon
-      @mouseup.native="handleUrlReload"
-      :style="{
-        cursor: 'pointer',
-      }"
-      type="pageRefresh"
-      class="page-refresh-icon"
-    />
   </div>
 </template>
 
 <script lang="ts">
 import Icon from '@/components/BaseIconContainer.vue';
+import SidebarIcon from '@/components/LandingView/SidebarIcon.vue';
 
 export default {
   name: 'BrowsingControl',
   components: {
+    SidebarIcon,
     Icon,
   },
   props: {
@@ -79,26 +79,29 @@ export default {
 
 <style scoped lang="scss">
 .browsing-control {
-  height: 20px;
+  height: 100%;
   display: flex;
+  align-items: center;
   z-index: 6;
+  border-right: 1px solid #F2F1F4;
+  .sidebar {
+    display: flex;
+    justify-content: flex-end;
+    margin-left: 15px;
+    transition: width 100ms linear;
+  }
   .back-icon {
     width: 16px;
     height: 16px;
-    margin: auto 20px auto 7px;
+    margin-left: 21px;
+    margin-right: 17px;
     -webkit-app-region: no-drag;
   }
   .forward-icon {
     width: 16px;
     height: 16px;
-    margin: auto 20px auto 0;
-    -webkit-app-region: no-drag;
-  }
-  .page-refresh-icon {
-    width: 16px;
-    height: 16px;
+    margin-left: 18px;
     -webkit-app-region: no-drag;
-    margin: auto 0 auto 0;
   }
 }
 </style>
diff --git a/src/renderer/components/BrowsingView/BrowsingHeader.vue b/src/renderer/components/BrowsingView/BrowsingHeader.vue
index 4d06937a7d..6ca53de1ab 100644
--- a/src/renderer/components/BrowsingView/BrowsingHeader.vue
+++ b/src/renderer/components/BrowsingView/BrowsingHeader.vue
@@ -11,46 +11,20 @@
       :forward-type="forwardType"
       :web-info="webInfo"
       :style="{
-        order: isDarwin ? 1 : 2,
-      }"
-    />
-    <browsing-favicons
-      :record-url="recordUrl"
-      :handle-bookmark-open="handleBookmarkOpen"
-      :style="{
-        order: isDarwin ? 2 : 3,
       }"
     />
     <browsing-input
-      v-show="showOpenUrl"
       :close-url-input="closeUrlInput"
       :play-file-with-playing-view="playFileWithPlayingView"
+      :style="{
+      }"
     />
-    <div
+    <browsing-pip
+      :handle-enter-pip="handleEnterPip"
+      :handle-global-pip="handleGlobalPip"
       :style="{
-        width: isDarwin ? '80px' : '100px',
-        display: 'flex',
-        zIndex: '6',
-        order: isDarwin ? 3 : 1,
-        webkitAppRegion: 'no-drag',
-        cursor: hasVideo ? 'pointer' : '',
       }"
-    >
-      <Icon
-        :type="picInPicType"
-        :style="{
-          margin: isDarwin ? 'auto 10px auto auto' : 'auto auto auto 15px',
-        }"
-        @mouseup.native="handleGlobalPip"
-      />
-      <Icon
-        :type="picInPicType"
-        :style="{
-          margin: isDarwin ? 'auto 10px auto auto' : 'auto auto auto 15px',
-        }"
-        @mouseup.native="handleEnterPip"
-      />
-    </div>
+    />
   </div>
 </template>
 
@@ -60,6 +34,7 @@ import { mapGetters } from 'vuex';
 import BrowsingFavicons from '@/components/BrowsingView/BrowsingFavicons.vue';
 import BrowsingInput from '@/components/BrowsingView/BrowsingInput.vue';
 import BrowsingControl from '@/components/BrowsingView/BrowsingControl.vue';
+import BrowsingPip from '@/components/BrowsingView/BrowsingPip.vue';
 import Icon from '@/components/BaseIconContainer.vue';
 
 export default {
@@ -68,6 +43,7 @@ export default {
     'browsing-favicons': BrowsingFavicons,
     'browsing-input': BrowsingInput,
     'browsing-control': BrowsingControl,
+    'browsing-pip': BrowsingPip,
     Icon,
   },
   props: {
@@ -109,9 +85,6 @@ export default {
   },
   computed: {
     ...mapGetters(['recordUrl', 'isMaximized']),
-    picInPicType() {
-      return this.hasVideo ? 'pip' : 'pipDisabled';
-    },
     isDarwin() {
       return process.platform === 'darwin';
     },
@@ -173,9 +146,15 @@ export default {
 
 <style scoped lang="scss">
 .header {
+  border-top-left-radius: 4px;
+  box-sizing: border-box;
   width: 100%;
-  height: 36px;
+  height: 40px;
   display: flex;
-  background: rgba(65, 65, 65, 1);
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #FFF;
+  border-bottom: 1px solid #F2F1F4;
 }
 </style>
diff --git a/src/renderer/components/BrowsingView/BrowsingInput.vue b/src/renderer/components/BrowsingView/BrowsingInput.vue
index e18a8d4796..ce309af75c 100644
--- a/src/renderer/components/BrowsingView/BrowsingInput.vue
+++ b/src/renderer/components/BrowsingView/BrowsingInput.vue
@@ -1,26 +1,21 @@
 <template>
   <div
-    :style="{
-      left: isDarwin ? '' : '15px',
-      right: isDarwin ? '15px' : '',
-    }"
     class="search-url"
   >
     <input
       ref="searchValue"
-      :style="{ order: isDarwin ? '1' : '2' }"
       @keypress="handleSearchKey"
       class="url-search"
       placeholder="请输入URL..."
       onfocus="select()"
     >
     <Icon
+      @mouseup.native="handleUrlReload"
       :style="{
-        order: isDarwin ? '2' : '1',
-        margin: isDarwin ? 'auto 0 auto 10px' : 'auto 10px auto 0' }"
-      @mouseup.native="handleCloseUrlInput"
-      type="closeInput"
-      class="close-search-icon"
+        cursor: 'pointer',
+      }"
+      type="pageRefresh"
+      class="page-refresh-icon"
     />
   </div>
 </template>
@@ -71,13 +66,12 @@ export default {
 }
 .search-url {
   display: flex;
-  width: auto;
+  justify-content: flex-start;
+  width: 100%;
   height: 24px;
-  position: absolute;
-  top: 6px;
   z-index: 6;
   .url-search {
-    width: 275px;
+    width: 100%;
     height: 24px;
     outline: none;
     background: rgba(255, 255, 255, 0.08);
@@ -88,12 +82,11 @@ export default {
     font-size: 13px;
     color: rgba(255, 255, 255, 0.8);
   }
-  .close-search-icon {
-    width: 10px;
-    height: 10px;
-    z-index: 6;
-    display: flex;
-    cursor: pointer;
+  .page-refresh-icon {
+    width: 16px;
+    height: 16px;
+    -webkit-app-region: no-drag;
+    margin: auto 0 auto 0;
   }
 }
 </style>
diff --git a/src/renderer/components/BrowsingView/BrowsingPip.vue b/src/renderer/components/BrowsingView/BrowsingPip.vue
new file mode 100644
index 0000000000..b5b4c3a545
--- /dev/null
+++ b/src/renderer/components/BrowsingView/BrowsingPip.vue
@@ -0,0 +1,49 @@
+<template>
+  <div
+    :style="{
+      width: '80px',
+      display: 'flex',
+      zIndex: '6',
+      webkitAppRegion: 'no-drag',
+      cursor: hasVideo ? 'pointer' : '',
+    }"
+  >
+    <Icon
+      :type="picInPicType"
+      @mouseup.native="handleGlobalPip"
+    />
+    <Icon
+      :type="picInPicType"
+      @mouseup.native="handleEnterPip"
+    />
+  </div>
+</template>
+<script lang="ts">
+import Icon from '@/components/BaseIconContainer.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    handleEnterPip: {
+      type: Function,
+      required: true,
+    },
+    handleGlobalPip: {
+      type: Function,
+      required: true,
+    },
+  },
+  computed: {
+    picInPicType() {
+      return this.hasVideo ? 'pip' : 'pipDisabled';
+    },
+  },
+  methods: {
+  },
+};
+</script>
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/renderer/components/LandingView/SidebarIcon.vue b/src/renderer/components/LandingView/SidebarIcon.vue
index b2da54d802..5ded19fbd0 100644
--- a/src/renderer/components/LandingView/SidebarIcon.vue
+++ b/src/renderer/components/LandingView/SidebarIcon.vue
@@ -24,7 +24,7 @@
           <path
             id="icon-sidebar"
             :d="d1"
-            :fill="highlight ? '#FFF' : '#ACACAC'"
+            :fill="fill ? fill : highlight ? '#FFF' : '#ACACAC'"
           />
         </g>
       </g>
@@ -34,6 +34,10 @@
 <script lang="ts">
 export default {
   props: {
+    fill: {
+      type: String,
+      default: '',
+    },
     mouseover: {
       type: Boolean,
       default: false,
diff --git a/src/renderer/components/Titlebar.vue b/src/renderer/components/Titlebar.vue
index babc4ef78d..267caad318 100644
--- a/src/renderer/components/Titlebar.vue
+++ b/src/renderer/components/Titlebar.vue
@@ -19,6 +19,7 @@
         @mouseout.native="mouseoverSidebar = false"
         @mouseup.native="handleSidebar"
         :mouseover="mouseoverSidebar"
+        :fill="isBrowsingView ? '#BBBACC' : ''"
         class="no-drag"
       />
     </div>
@@ -110,6 +111,7 @@
           marginLeft: showSidebar ? '19px' : '4px',
         }"
         :mouseover="mouseoverSidebar"
+        :fill="isBrowsingView ? '#BBBACC' : ''"
         class="sidebar no-drag"
       />
     </div>
@@ -139,6 +141,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isBrowsingView: {
+      type: Boolean,
+      default: false,
+    },
     showAllWidgets: {
       type: Boolean,
       default: true,
diff --git a/src/renderer/containers/LandingView.vue b/src/renderer/containers/LandingView.vue
index 627b2bbb81..39d0830100 100644
--- a/src/renderer/containers/LandingView.vue
+++ b/src/renderer/containers/LandingView.vue
@@ -1,130 +1,130 @@
 <template>
   <div class="landing-view">
-      <open-url
-        v-show="openUrlShow"
-        :open-input-url="openInputUrl"
-        :close-url-input="closeUrlInput"
-      />
-      <transition name="background-container-transition">
-        <div
-          v-if="item.backgroundUrl"
-          class="background"
+    <open-url
+      v-show="openUrlShow"
+      :open-input-url="openInputUrl"
+      :close-url-input="closeUrlInput"
+    />
+    <transition name="background-container-transition">
+      <div
+        v-if="item.backgroundUrl"
+        class="background"
+      >
+        <transition
+          name="background-transition"
+          mode="in-out"
         >
-          <transition
-            name="background-transition"
-            mode="in-out"
-          >
-            <div
-              :key="item.path"
-              :style="{
-                backgroundImage: item.backgroundUrl,
-              }"
-              class="background-image"
-            >
-              <div class="background-mask" />
-            </div>
-          </transition>
-          <div class="item-info">
-            <div class="item-name">
-              {{ item.basename }}
-            </div>
-            <div class="item-description" />
-            <div class="item-timing">
-              <span class="timing-played">
-                {{ timeInvalidForm(timecodeFromSeconds(item.lastPlayedTime)) }}
-                / {{ timeInvalidForm(timecodeFromSeconds(item.duration)) }}
-                <span v-if="item.playlistLength > 1">
-                  ·&nbsp;{{
-                    $t('recentPlaylist.playlistSource')
-                  }}&nbsp;&nbsp;{{ item.playedIndex + 1 }} / {{ item.playlistLength }}
-                </span>
-              </span>
-            </div>
-            <div class="item-progress">
-              <div
-                :style="{ width: item.percentage + '%' }"
-                class="progress-played"
-              />
-            </div>
-          </div>
-        </div>
-      </transition>
-      <div class="welcome-container">
-        <transition :name="logoTransition">
           <div
-            v-if="pageMounted && (!item.backgroundUrl)"
-            class="logo-container"
+            :key="item.path"
+            :style="{
+              backgroundImage: item.backgroundUrl,
+            }"
+            class="background-image"
           >
-            <Icon type="logo" />
+            <div class="background-mask" />
           </div>
         </transition>
+        <div class="item-info">
+          <div class="item-name">
+            {{ item.basename }}
+          </div>
+          <div class="item-description" />
+          <div class="item-timing">
+            <span class="timing-played">
+              {{ timeInvalidForm(timecodeFromSeconds(item.lastPlayedTime)) }}
+              / {{ timeInvalidForm(timecodeFromSeconds(item.duration)) }}
+              <span v-if="item.playlistLength > 1">
+                ·&nbsp;{{
+                  $t('recentPlaylist.playlistSource')
+                }}&nbsp;&nbsp;{{ item.playedIndex + 1 }} / {{ item.playlistLength }}
+              </span>
+            </span>
+          </div>
+          <div class="item-progress">
+            <div
+              :style="{ width: item.percentage + '%' }"
+              class="progress-played"
+            />
+          </div>
+        </div>
       </div>
+    </transition>
+    <div class="welcome-container">
+      <transition :name="logoTransition">
+        <div
+          v-if="pageMounted && (!item.backgroundUrl)"
+          class="logo-container"
+        >
+          <Icon type="logo" />
+        </div>
+      </transition>
+    </div>
+    <div
+      ref="mask"
+      class="mask"
+    />
+    <div
+      :style="{
+        left: playlistLeft,
+        right: playlistRight,
+        bottom: winWidth > 1355 ? `${40 / 1355 * winWidth}px` : '40px',
+        transition: tranFlag ?
+          'left 400ms cubic-bezier(0.42, 0, 0.58, 1)'
+          : 'right 400ms cubic-bezier(0.42, 0, 0.58, 1)',
+      }"
+      class="controller"
+    >
       <div
-        ref="mask"
-        class="mask"
-      />
-      <div
-        :style="{
-          left: playlistLeft,
-          right: playlistRight,
-          bottom: winWidth > 1355 ? `${40 / 1355 * winWidth}px` : '40px',
-          transition: tranFlag ?
-            'left 400ms cubic-bezier(0.42, 0, 0.58, 1)'
-            : 'right 400ms cubic-bezier(0.42, 0, 0.58, 1)',
-        }"
-        class="controller"
+        :style="{marginLeft: winWidth > 1355 ? `${50 / 1355 * winWidth}px` : '50px'}"
+        class="playlist no-drag"
       >
         <div
-          :style="{marginLeft: winWidth > 1355 ? `${50 / 1355 * winWidth}px` : '50px'}"
-          class="playlist no-drag"
+          :style="{
+            height:`${thumbnailHeight}px`,
+            width:`${thumbnailWidth}px`,
+            marginRight: `${marginRight}px`,
+            cursor: firstIndex === 0 ? 'pointer' : `${cursorUrl}, pointer`,
+            backgroundColor:
+              item.backgroundUrl
+                ? 'rgba(255,255,255,0.12) ': 'rgba(255,255,255,0.05)',
+          }"
+          @click="openOrMove"
+          class="button"
         >
-          <div
-            :style="{
-              height:`${thumbnailHeight}px`,
-              width:`${thumbnailWidth}px`,
-              marginRight: `${marginRight}px`,
-              cursor: firstIndex === 0 ? 'pointer' : `${cursorUrl}, pointer`,
-              backgroundColor:
-                item.backgroundUrl
-                  ? 'rgba(255,255,255,0.12) ': 'rgba(255,255,255,0.05)',
-            }"
-            @click="openOrMove"
-            class="button"
-          >
-            <div class="btnMask">
-              <Icon
-                class="addUi"
-                type="add"
-              />
-            </div>
+          <div class="btnMask">
+            <Icon
+              class="addUi"
+              type="add"
+            />
           </div>
-          <!-- eslint-disable-next-line vue/require-component-is -->
-          <component
-            :is="playlistLength > 1 ? 'PlaylistItem' : 'VideoItem'"
-            v-for="({ backgroundUrl, id, playlistLength }, index) in landingViewItems"
-            :key="id"
-            :cursor-url="cursorUrl"
-            :can-hover="canHover"
-            :backgroundUrl="backgroundUrl"
-            :index="index"
-            :is-in-range="
+        </div>
+        <!-- eslint-disable-next-line vue/require-component-is -->
+        <component
+          :is="playlistLength > 1 ? 'PlaylistItem' : 'VideoItem'"
+          v-for="({ backgroundUrl, id, playlistLength }, index) in landingViewItems"
+          :key="id"
+          :cursor-url="cursorUrl"
+          :can-hover="canHover"
+          :backgroundUrl="backgroundUrl"
+          :index="index"
+          :is-in-range="
               firstIndex === 0
               ? index + 1 <= lastIndex - (showSidebar ? 1 : 0)
               : index + 1 >= firstIndex + (showSidebar ? 1 : 0)
             "
-            :thumbnail-width="thumbnailWidth"
-            :thumbnail-height="thumbnailHeight"
-            :shifting="shifting"
-            :style="{
-              marginRight: `${marginRight}px`,
-            }"
-            :on-item-mouseover="onItemMouseover"
-            :on-item-click="onItemClick"
-            :on-item-delete="onItemDelete"
-          />
-        </div>
+          :thumbnail-width="thumbnailWidth"
+          :thumbnail-height="thumbnailHeight"
+          :shifting="shifting"
+          :style="{
+            marginRight: `${marginRight}px`,
+          }"
+          :on-item-mouseover="onItemMouseover"
+          :on-item-click="onItemClick"
+          :on-item-delete="onItemDelete"
+        />
       </div>
-      <NotificationBubble />
+    </div>
+    <NotificationBubble />
   </div>
 </template>
 

From 94637295ad2755a574d88b9d6eb3fdd5547a1347 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Tue, 3 Sep 2019 16:03:34 +0800
Subject: [PATCH 039/123] fix(browsingview): fix change pip may not pause video

---
 src/main/helpers/BrowserViewManager.ts  | 47 ++++++++++++++-----------
 src/renderer/components/BrowsingPip.vue |  2 +-
 2 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/main/helpers/BrowserViewManager.ts b/src/main/helpers/BrowserViewManager.ts
index 2a360a03e5..676e94c4db 100644
--- a/src/main/helpers/BrowserViewManager.ts
+++ b/src/main/helpers/BrowserViewManager.ts
@@ -65,7 +65,27 @@ export class BrowserViewManager implements IBrowserViewManager {
       }),
     };
     // loadURL
-    page.view.webContents.loadURL(page.url);
+    page.view.webContents.loadURL(page.url).then(() => {
+      if (channel === this.currentChannel) {
+        page.view.webContents.executeJavaScript('var iframe = document.querySelector("iframe");if (iframe && iframe.contentDocument) {document.getElementsByTagName("video").length + iframe.contentDocument.getElementsByTagName("video").length} else {document.getElementsByTagName("video").length}').then((r: number) => {
+          const hasLastPage = this.history[channel].list.length;
+          if (hasLastPage && r) {
+            page.view.webContents.once('media-started-playing', () => {
+              if (this.currentChannel.includes('bilibili')) {
+                let type = '';
+                page.view.webContents
+                  .executeJavaScript(bilibiliFindType).then((r: (HTMLElement | null)[]) => {
+                    type = ['bangumi', 'videoStreaming', 'iframeStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
+                    page.view.webContents.executeJavaScript(bilibiliVideoPause(type));
+                  });
+              } else {
+                page.view.webContents.executeJavaScript('setTimeout(() => { document.querySelector("video").pause(); }, 100)');
+              }
+            });
+          }
+        });
+      }
+    });
 
     // 暂停当前视频
     if (this.currentChannel) {
@@ -86,21 +106,6 @@ export class BrowserViewManager implements IBrowserViewManager {
             });
           this.backPage = [];
         }
-        const hasLastPage = this.history[channel].list.length;
-        if (hasLastPage) {
-          page.view.webContents.once('media-started-playing', () => {
-            if (this.currentChannel.includes('bilibili')) {
-              let type = '';
-              page.view.webContents
-                .executeJavaScript(bilibiliFindType).then((r: (HTMLElement | null)[]) => {
-                  type = ['bangumi', 'videoStreaming', 'iframeStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
-                  page.view.webContents.executeJavaScript(bilibiliVideoPause(type));
-                });
-            } else {
-              page.view.webContents.executeJavaScript('setTimeout(() => { document.querySelector("video").pause(); }, 100)');
-            }
-          });
-        }
       }
     }
 
@@ -192,15 +197,17 @@ export class BrowserViewManager implements IBrowserViewManager {
   public changePip(channel: string): { pipBrowser: Electron.BrowserView;
     mainBrowser: BrowserViewData } {
     this.currentChannel = channel;
-    this.pauseVideo((this.currentPip.pipPage as BrowserViewHistory).view);
+    this.pauseVideo((this.currentPip.pipPage as BrowserViewHistory).view,
+      this.currentPip.pipChannel);
     return this.enterPip();
   }
 
-  public pauseVideo(view?: BrowserView): void {
+  public pauseVideo(view?: BrowserView, currentChannel?: string): void {
+    const pausedChannel = currentChannel || this.currentChannel;
     const currentIndex = this.history[this.currentChannel].currentIndex;
     const currentView = view || this.history[this.currentChannel].list[currentIndex].view;
     if (currentView.webContents.isCurrentlyAudible()) {
-      if (this.currentChannel.includes('bilibili')) {
+      if (pausedChannel.includes('bilibili')) {
         let type = '';
         currentView.webContents
           .executeJavaScript(bilibiliFindType).then((r: (HTMLElement | null)[]) => {
@@ -258,5 +265,5 @@ export interface IBrowserViewManager {
   exitPip(): BrowserViewData
   changePip(channel: string): { pipBrowser: BrowserView, mainBrowser: BrowserViewData }
   pipClose(): void
-  pauseVideo(): void
+  pauseVideo(view?: BrowserView, currentChannel?: string): void
 }
diff --git a/src/renderer/components/BrowsingPip.vue b/src/renderer/components/BrowsingPip.vue
index 5f314fca0e..d929023d2c 100644
--- a/src/renderer/components/BrowsingPip.vue
+++ b/src/renderer/components/BrowsingPip.vue
@@ -46,7 +46,7 @@ export default {
       x = Math.round((x / this.getRatio()) - this.offset[0]);
       y = Math.round((y / this.getRatio()) - this.offset[1]);
       if (this.isDarwin) {
-        electron.ipcRenderer.send('callBrowsingWindowMethod', 'setPosition', [x, y]);
+        electron.ipcRenderer.send('callBrowsingWindowMethod', 'setPosition', [x || 0, y || 0]);
       } else if (this.windowSize) {
         electron.ipcRenderer.send('callBrowsingWindowMethod', 'setBounds', [{
           x, y, width: this.windowSize[0], height: this.windowSize[1],

From dc17be9f37a29dd59898c14ca5592da168d88d12 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Tue, 3 Sep 2019 16:08:05 +0800
Subject: [PATCH 040/123] style(browsing): rename

---
 .../BrowsingView/{BrowsingPip.vue => BrowsingPipControl.vue}      | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/renderer/components/BrowsingView/{BrowsingPip.vue => BrowsingPipControl.vue} (100%)

diff --git a/src/renderer/components/BrowsingView/BrowsingPip.vue b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
similarity index 100%
rename from src/renderer/components/BrowsingView/BrowsingPip.vue
rename to src/renderer/components/BrowsingView/BrowsingPipControl.vue

From d3cd3bc3ef845eb4c6914325df5e8adfbf9d0b60 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Tue, 3 Sep 2019 16:34:06 +0800
Subject: [PATCH 041/123] feat(browsing): css adjustment

---
 .../BrowsingView/BrowsingControl.vue          |  4 +--
 .../BrowsingView/BrowsingHeader.vue           |  6 ++---
 .../components/BrowsingView/BrowsingInput.vue | 17 +++++++-----
 .../BrowsingView/BrowsingPipControl.vue       | 27 ++++++++++---------
 4 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/src/renderer/components/BrowsingView/BrowsingControl.vue b/src/renderer/components/BrowsingView/BrowsingControl.vue
index 051120e7a0..39aa5335fe 100644
--- a/src/renderer/components/BrowsingView/BrowsingControl.vue
+++ b/src/renderer/components/BrowsingView/BrowsingControl.vue
@@ -94,13 +94,13 @@ export default {
     width: 16px;
     height: 16px;
     margin-left: 21px;
-    margin-right: 17px;
+    margin-right: 18px;
     -webkit-app-region: no-drag;
   }
   .forward-icon {
     width: 16px;
     height: 16px;
-    margin-left: 18px;
+    margin-right: 17px;
     -webkit-app-region: no-drag;
   }
 }
diff --git a/src/renderer/components/BrowsingView/BrowsingHeader.vue b/src/renderer/components/BrowsingView/BrowsingHeader.vue
index 6ca53de1ab..ad108b4f71 100644
--- a/src/renderer/components/BrowsingView/BrowsingHeader.vue
+++ b/src/renderer/components/BrowsingView/BrowsingHeader.vue
@@ -19,7 +19,7 @@
       :style="{
       }"
     />
-    <browsing-pip
+    <browsing-pip-control
       :handle-enter-pip="handleEnterPip"
       :handle-global-pip="handleGlobalPip"
       :style="{
@@ -34,7 +34,7 @@ import { mapGetters } from 'vuex';
 import BrowsingFavicons from '@/components/BrowsingView/BrowsingFavicons.vue';
 import BrowsingInput from '@/components/BrowsingView/BrowsingInput.vue';
 import BrowsingControl from '@/components/BrowsingView/BrowsingControl.vue';
-import BrowsingPip from '@/components/BrowsingView/BrowsingPip.vue';
+import BrowsingPipControl from '@/components/BrowsingView/BrowsingPipControl.vue';
 import Icon from '@/components/BaseIconContainer.vue';
 
 export default {
@@ -43,7 +43,7 @@ export default {
     'browsing-favicons': BrowsingFavicons,
     'browsing-input': BrowsingInput,
     'browsing-control': BrowsingControl,
-    'browsing-pip': BrowsingPip,
+    'browsing-pip-control': BrowsingPipControl,
     Icon,
   },
   props: {
diff --git a/src/renderer/components/BrowsingView/BrowsingInput.vue b/src/renderer/components/BrowsingView/BrowsingInput.vue
index ce309af75c..c65e7c410d 100644
--- a/src/renderer/components/BrowsingView/BrowsingInput.vue
+++ b/src/renderer/components/BrowsingView/BrowsingInput.vue
@@ -6,7 +6,7 @@
       ref="searchValue"
       @keypress="handleSearchKey"
       class="url-search"
-      placeholder="请输入URL..."
+      placeholder="Splayer"
       onfocus="select()"
     >
     <Icon
@@ -67,6 +67,7 @@ export default {
 .search-url {
   display: flex;
   justify-content: flex-start;
+  align-items: center;
   width: 100%;
   height: 24px;
   z-index: 6;
@@ -74,19 +75,23 @@ export default {
     width: 100%;
     height: 24px;
     outline: none;
-    background: rgba(255, 255, 255, 0.08);
-    border-radius: 12px;
+    background-color: #FFF; 
     border: none;
     z-index: 6;
     text-indent: 15px;
-    font-size: 13px;
-    color: rgba(255, 255, 255, 0.8);
+
+    font-size: 12px;
+    color: rgba(15, 26, 59, 0.5);
+    letter-spacing: 0.09px;
+    text-align: center;
+    line-height: 40px;
   }
   .page-refresh-icon {
     width: 16px;
     height: 16px;
     -webkit-app-region: no-drag;
-    margin: auto 0 auto 0;
+    margin-right: 16px;
+    margin-left: 12px;
   }
 }
 </style>
diff --git a/src/renderer/components/BrowsingView/BrowsingPipControl.vue b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
index b5b4c3a545..8581f13273 100644
--- a/src/renderer/components/BrowsingView/BrowsingPipControl.vue
+++ b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
@@ -1,20 +1,11 @@
 <template>
   <div
-    :style="{
-      width: '80px',
-      display: 'flex',
-      zIndex: '6',
-      webkitAppRegion: 'no-drag',
-      cursor: hasVideo ? 'pointer' : '',
-    }"
+    class="pip-control"
   >
     <Icon
       :type="picInPicType"
       @mouseup.native="handleGlobalPip"
-    />
-    <Icon
-      :type="picInPicType"
-      @mouseup.native="handleEnterPip"
+      class="control"
     />
   </div>
 </template>
@@ -45,5 +36,17 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-
+.pip-control {
+  z-index: 6;
+  display: flex;
+  height: 100%;
+  justify-content: space-between;
+  align-items: center;
+  border-left: 1px solid #F2F1F4;
+  .control {
+    width: 46px;
+    margin-right: 8px;
+    margin-left: 8px;
+  }
+}
 </style>
\ No newline at end of file

From 7c35dbdbb9c485833bc1d916eff33cecbb125e54 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Tue, 3 Sep 2019 18:09:48 +0800
Subject: [PATCH 042/123] feat(browsing): sidebar

---
 src/main/helpers/BrowserViewManager.ts        |  22 +-
 src/renderer/App.vue                          |   3 +
 src/renderer/components/BrowsingView.vue      | 636 +++++++++++++-----
 .../BrowsingView/BrowsingControl.vue          |   7 +-
 .../BrowsingView/BrowsingHeader.vue           |  26 +-
 .../components/BrowsingView/BrowsingInput.vue |   2 +-
 .../BrowsingView/BrowsingPipControl.vue       |   2 +-
 .../components/LandingView/SidebarIcon.vue    |   9 +-
 src/renderer/components/Titlebar.vue          |   5 -
 src/renderer/containers/LandingView.vue       |  11 +-
 10 files changed, 495 insertions(+), 228 deletions(-)

diff --git a/src/main/helpers/BrowserViewManager.ts b/src/main/helpers/BrowserViewManager.ts
index 676e94c4db..05d59bf7fe 100644
--- a/src/main/helpers/BrowserViewManager.ts
+++ b/src/main/helpers/BrowserViewManager.ts
@@ -93,19 +93,17 @@ export class BrowserViewManager implements IBrowserViewManager {
         const currentIndex = this.history[this.currentChannel].currentIndex;
         const view = this.history[this.currentChannel].list[currentIndex].view;
         this.pauseVideo(view);
-      } else {
+      } else if (this.backPage.length) {
         // 清除后退的记录
-        if (this.backPage.length) {
-          remove(this.history[this.currentChannel].list,
-            (list: BrowserViewHistory) => {
-              if (this.backPage.includes(list)) {
-                list.view.destroy();
-                return true;
-              }
-              return false;
-            });
-          this.backPage = [];
-        }
+        remove(this.history[this.currentChannel].list,
+          (list: BrowserViewHistory) => {
+            if (this.backPage.includes(list)) {
+              list.view.destroy();
+              return true;
+            }
+            return false;
+          });
+        this.backPage = [];
       }
     }
 
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 3b1829fd1e..cb70dad7eb 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -63,6 +63,9 @@ export default {
     },
   },
   mounted() {
+    this.$event.on('side-bar-mouseup', () => {
+      this.showSidebar = !this.showSidebar;
+    });
     ipcRenderer.on('open-file', (event: Event, args: { onlySubtitle: boolean, files: string[] }) => {
       this.openFileArgs = args;
     });
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 73e75b8294..d8b273bcfc 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -8,6 +8,7 @@
   >
     <browsing-header
       ref="browsingHeader"
+      :show-sidebar="showSidebar"
       :handle-enter-pip="handleEnterPip"
       :handle-global-pip="handleGlobalPip"
       :handle-url-reload="handleUrlReload"
@@ -47,7 +48,11 @@ import { Browsing as browsingActions } from '@/store/actionTypes';
 import BrowsingHeader from '@/components/BrowsingView/BrowsingHeader.vue';
 import asyncStorage from '@/helpers/asyncStorage';
 import NotificationBubble from '@/components/NotificationBubble.vue';
-import { bilibili, bilibiliFindType, bilibiliBarrageAdapt } from '../../shared/pip/bilibili';
+import {
+  bilibili,
+  bilibiliFindType,
+  bilibiliBarrageAdapt,
+} from '../../shared/pip/bilibili';
 import youtube from '../../shared/pip/youtube';
 import iqiyi, { iqiyiBarrageAdapt } from '../../shared/pip/iqiyi';
 import globalPip from '../../shared/pip/others';
@@ -77,8 +82,10 @@ export default {
       maskToShow: false,
       dropFiles: [],
       hasVideo: false,
-      calculateVideoNum: 'var iframe = document.querySelector("iframe");if (iframe && iframe.contentDocument) {document.getElementsByTagName("video").length + iframe.contentDocument.getElementsByTagName("video").length} else {document.getElementsByTagName("video").length}',
-      getVideoStyle: 'getComputedStyle(document.querySelector("video") || document.querySelector("iframe").contentDocument.querySelector("video"))',
+      calculateVideoNum:
+        'var iframe = document.querySelector("iframe");if (iframe && iframe.contentDocument) {document.getElementsByTagName("video").length + iframe.contentDocument.getElementsByTagName("video").length} else {document.getElementsByTagName("video").length}',
+      getVideoStyle:
+        'getComputedStyle(document.querySelector("video") || document.querySelector("iframe").contentDocument.querySelector("video"))',
       pipBtnsKeepShow: false,
       asyncTasksDone: false,
       headerToShow: true,
@@ -98,7 +105,21 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['winPos', 'isFullScreen', 'initialUrl', 'winWidth', 'winSize', 'browsingSize', 'pipSize', 'pipPos', 'barrageOpen', 'browsingPos', 'isFullScreen', 'isFocused', 'isPip']),
+    ...mapGetters([
+      'winPos',
+      'isFullScreen',
+      'initialUrl',
+      'winWidth',
+      'winSize',
+      'browsingSize',
+      'pipSize',
+      'pipPos',
+      'barrageOpen',
+      'browsingPos',
+      'isFullScreen',
+      'isFocused',
+      'isPip',
+    ]),
     isDarwin() {
       return process.platform === 'darwin';
     },
@@ -109,11 +130,7 @@ export default {
       return iqiyiBarrageAdapt(this.barrageOpen);
     },
     bilibiliPip() {
-      return bilibili(
-        this.bilibiliType,
-        this.barrageOpen,
-        this.pipSize,
-      );
+      return bilibili(this.bilibiliType, this.barrageOpen, this.pipSize);
     },
     bilibiliBarrage() {
       return bilibiliBarrageAdapt(this.bilibiliType, this.barrageOpen);
@@ -131,13 +148,19 @@ export default {
     },
     adaptFinished(val: boolean) {
       if (val) {
-        const opacity = ['youtube', 'others'].includes(this.pipType) || (this.pipType === 'bilibili' && this.bilibiliType === 'others') ? 0.2 : 1;
-        this.$electron.ipcRenderer.send(this.isPip ? 'shift-pip' : 'enter-pip', {
-          isGlobal: this.isGlobal,
-          opacity,
-          barrageOpen: opacity === 1 ? this.barrageOpen : false,
-          pipInfo: this.pipInfo,
-        });
+        const opacity = ['youtube', 'others'].includes(this.pipType)
+          || (this.pipType === 'bilibili' && this.bilibiliType === 'others')
+          ? 0.2
+          : 1;
+        this.$electron.ipcRenderer.send(
+          this.isPip ? 'shift-pip' : 'enter-pip',
+          {
+            isGlobal: this.isGlobal,
+            opacity,
+            barrageOpen: opacity === 1 ? this.barrageOpen : false,
+            pipInfo: this.pipInfo,
+          },
+        );
         this.updateIsPip(true);
       }
     },
@@ -147,8 +170,13 @@ export default {
     dropFiles(val: string[]) {
       this.backToLandingView = false;
       const onlyFolders = val.every((file: fs.PathLike) => fs.statSync(file).isDirectory());
-      if (onlyFolders || val.every((file: fs.PathLike) => getValidVideoRegex()
-        .test(file) && !getValidSubtitleRegex().test(file))) {
+      if (
+        onlyFolders
+        || val.every(
+          (file: fs.PathLike) => getValidVideoRegex().test(file)
+            && !getValidSubtitleRegex().test(file),
+        )
+      ) {
         val.forEach((file: fs.PathLike) => this.$electron.remote.app.addRecentDocument(file));
         if (onlyFolders) {
           this.openFolder(...val);
@@ -174,17 +202,27 @@ export default {
       }
     },
     loadingState(val: boolean) {
-      const loadUrl = this.$electron.remote.getCurrentWindow()
-        .getBrowserViews()[0].webContents.getURL();
+      const loadUrl = this.$electron.remote
+        .getCurrentWindow()
+        .getBrowserViews()[0]
+        .webContents.getURL();
       const hostname = urlParseLax(loadUrl).hostname;
       let channel = hostname.slice(hostname.indexOf('.') + 1, hostname.length);
       if (loadUrl.includes('youtube')) {
         channel = 'youtube.com';
       }
-      this.updateCanGoBack(this.$electron.remote.getCurrentWindow()
-        .getBrowserViews()[0].webContents.canGoBack());
-      this.updateCanGoForward(this.$electron.remote.getCurrentWindow()
-        .getBrowserViews()[0].webContents.canGoForward());
+      this.updateCanGoBack(
+        this.$electron.remote
+          .getCurrentWindow()
+          .getBrowserViews()[0]
+          .webContents.canGoBack(),
+      );
+      this.updateCanGoForward(
+        this.$electron.remote
+          .getCurrentWindow()
+          .getBrowserViews()[0]
+          .webContents.canGoForward(),
+      );
       if (val) {
         this.hasVideo = false;
       } else {
@@ -192,30 +230,58 @@ export default {
           this.pipAdapter();
           this.pipRestore = false;
         }
-        this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
-          .executeJavaScript(this.calculateVideoNum, (r: number) => {
-            this.hasVideo = channel === 'youtube.com' && !getVideoId(loadUrl).id ? false : !!r;
-          });
+        this.$electron.remote
+          .getCurrentWindow()
+          .getBrowserViews()[0]
+          .webContents.executeJavaScript(
+            this.calculateVideoNum,
+            (r: number) => {
+              this.hasVideo = channel === 'youtube.com' && !getVideoId(loadUrl).id
+                ? false
+                : !!r;
+            },
+          );
       }
     },
     headerToShow(val: boolean) {
-      const currentView = this.$electron.remote.getCurrentWindow().getBrowserViews()[0];
+      const currentView = this.$electron.remote
+        .getCurrentWindow()
+        .getBrowserViews()[0];
       if (!val) {
         currentView.setBounds({
-          x: 0, y: 0, width: window.screen.width, height: window.screen.height,
+          x: 0,
+          y: 0,
+          width: window.screen.width,
+          height: window.screen.height,
         });
       } else {
         currentView.setBounds({
-          x: 0, y: 36, width: this.winSize[0], height: this.winSize[1] - 36,
+          x: 0,
+          y: 36,
+          width: this.winSize[0],
+          height: this.winSize[1] - 36,
         });
       }
     },
   },
   created() {
-    this.$electron.ipcRenderer.send('callMainWindowMethod', 'setMinimumSize', [570, 375]);
-    this.$electron.ipcRenderer.send('callMainWindowMethod', 'setSize', this.browsingSize);
-    this.$electron.ipcRenderer.send('callMainWindowMethod', 'setPosition', this.browsingPos);
-    this.$electron.ipcRenderer.send('callMainWindowMethod', 'setAspectRatio', [0]);
+    this.$electron.ipcRenderer.send('callMainWindowMethod', 'setMinimumSize', [
+      570,
+      375,
+    ]);
+    this.$electron.ipcRenderer.send(
+      'callMainWindowMethod',
+      'setSize',
+      this.browsingSize,
+    );
+    this.$electron.ipcRenderer.send(
+      'callMainWindowMethod',
+      'setPosition',
+      this.browsingPos,
+    );
+    this.$electron.ipcRenderer.send('callMainWindowMethod', 'setAspectRatio', [
+      0,
+    ]);
   },
   mounted() {
     this.menuService = new MenuService();
@@ -257,55 +323,81 @@ export default {
     this.$electron.ipcRenderer.on('quit', () => {
       this.quit = true;
     });
-    this.$electron.ipcRenderer.on('update-pip-size', (e: Event, args: number[]) => {
-      this.$store.dispatch('updatePipSize', args);
-    });
-    this.$electron.ipcRenderer.on('update-pip-state', (e: Event, info: { size: number[], position: number[] }) => {
-      this.$store.dispatch('updatePipPos', info.position);
-      this.$store.dispatch('updatePipSize', info.size);
-      this.updateIsPip(false);
-    });
-    this.$electron.ipcRenderer.on('update-browser-state', (e: Event, state: { url: string, canGoBack: boolean, canGoForward: boolean }) => {
-      this.currentUrl = urlParseLax(state.url).href;
-      this.removeListener();
-      this.addListenerToBrowser();
-      this.canGoBack = state.canGoBack;
-      this.canGoForward = state.canGoForward;
-      const loadUrl = this.$electron.remote.getCurrentWindow()
-        .getBrowserViews()[0].webContents.getURL();
-      const hostname = urlParseLax(loadUrl).hostname;
-      let channel = hostname.slice(hostname.indexOf('.') + 1, hostname.length);
-      if (loadUrl.includes('youtube')) {
-        channel = 'youtube.com';
-      }
-      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
-        .executeJavaScript(this.calculateVideoNum, (r: number) => {
-          this.hasVideo = channel === 'youtube.com' && !getVideoId(loadUrl).id ? false : !!r;
+    this.$electron.ipcRenderer.on(
+      'update-pip-size',
+      (e: Event, args: number[]) => {
+        this.$store.dispatch('updatePipSize', args);
+      },
+    );
+    this.$electron.ipcRenderer.on(
+      'update-pip-state',
+      (e: Event, info: { size: number[]; position: number[] }) => {
+        this.$store.dispatch('updatePipPos', info.position);
+        this.$store.dispatch('updatePipSize', info.size);
+        this.updateIsPip(false);
+      },
+    );
+    this.$electron.ipcRenderer.on(
+      'update-browser-state',
+      (
+        e: Event,
+        state: { url: string; canGoBack: boolean; canGoForward: boolean },
+      ) => {
+        this.currentUrl = urlParseLax(state.url).href;
+        this.removeListener();
+        this.addListenerToBrowser();
+        this.canGoBack = state.canGoBack;
+        this.canGoForward = state.canGoForward;
+        const loadUrl = this.$electron.remote
+          .getCurrentWindow()
+          .getBrowserViews()[0]
+          .webContents.getURL();
+        const hostname = urlParseLax(loadUrl).hostname;
+        let channel = hostname.slice(
+          hostname.indexOf('.') + 1,
+          hostname.length,
+        );
+        if (loadUrl.includes('youtube')) {
+          channel = 'youtube.com';
+        }
+        this.$electron.remote
+          .getCurrentWindow()
+          .getBrowserViews()[0]
+          .webContents.executeJavaScript(
+            this.calculateVideoNum,
+            (r: number) => {
+              this.hasVideo = channel === 'youtube.com' && !getVideoId(loadUrl).id
+                ? false
+                : !!r;
+            },
+          );
+        this.$bus.$emit('update-web-info', {
+          canGoBack: state.canGoBack,
+          canGoForward: state.canGoForward,
         });
-      this.$bus.$emit('update-web-info', {
-        canGoBack: state.canGoBack,
-        canGoForward: state.canGoForward,
-      });
-    });
+      },
+    );
   },
   beforeDestroy() {
     this.removeListener();
     this.$store.dispatch('updateBrowsingSize', this.winSize);
     this.$store.dispatch('updateBrowsingPos', this.winPos);
     this.updateIsPip(false);
-    asyncStorage.set('browsing', {
-      browsingSize: this.browsingSize,
-      browsingPos: this.browsingPos,
-      barrageOpen: this.barrageOpen,
-    }).finally(() => {
-      this.menuService.updateMenuItemEnabled('file.open', true);
-      window.removeEventListener('beforeunload', this.beforeUnloadHandler);
-      window.removeEventListener('focus', this.focusHandler);
-      if (this.backToLandingView) {
-        this.$electron.ipcRenderer.send('remove-browser');
-        windowRectService.uploadWindowBy(false, 'landing-view');
-      }
-    });
+    asyncStorage
+      .set('browsing', {
+        browsingSize: this.browsingSize,
+        browsingPos: this.browsingPos,
+        barrageOpen: this.barrageOpen,
+      })
+      .finally(() => {
+        this.menuService.updateMenuItemEnabled('file.open', true);
+        window.removeEventListener('beforeunload', this.beforeUnloadHandler);
+        window.removeEventListener('focus', this.focusHandler);
+        if (this.backToLandingView) {
+          this.$electron.ipcRenderer.send('remove-browser');
+          windowRectService.uploadWindowBy(false, 'landing-view');
+        }
+      });
   },
   methods: {
     ...mapActions({
@@ -320,20 +412,32 @@ export default {
     focusHandler() {
       this.menuService.updateFocusedWindow(true);
       this.updatePipState(this.hasVideo);
-      this.updateCanGoBack(this.$electron.remote.getCurrentWindow()
-        .getBrowserViews()[0].webContents.canGoBack());
-      this.updateCanGoForward(this.$electron.remote.getCurrentWindow()
-        .getBrowserViews()[0].webContents.canGoForward());
+      this.updateCanGoBack(
+        this.$electron.remote
+          .getCurrentWindow()
+          .getBrowserViews()[0]
+          .webContents.canGoBack(),
+      );
+      this.updateCanGoForward(
+        this.$electron.remote
+          .getCurrentWindow()
+          .getBrowserViews()[0]
+          .webContents.canGoForward(),
+      );
       this.updateReload(true);
-      const loadUrl = this.$electron.remote.getCurrentWindow()
-        .getBrowserViews()[0].webContents.getURL();
+      const loadUrl = this.$electron.remote
+        .getCurrentWindow()
+        .getBrowserViews()[0]
+        .webContents.getURL();
       const hostname = urlParseLax(loadUrl).hostname;
       let channel = hostname.slice(hostname.indexOf('.') + 1, hostname.length);
       if (loadUrl.includes('youtube')) {
         channel = 'youtube.com';
       }
-      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
-        .executeJavaScript(this.calculateVideoNum, (r: number) => {
+      this.$electron.remote
+        .getCurrentWindow()
+        .getBrowserViews()[0]
+        .webContents.executeJavaScript(this.calculateVideoNum, (r: number) => {
           this.hasVideo = channel === 'youtube.com' && !getVideoId(loadUrl).id ? false : !!r;
         });
     },
@@ -343,31 +447,40 @@ export default {
         e.returnValue = false;
         this.$store.dispatch('updateBrowsingSize', this.winSize);
         this.$store.dispatch('updateBrowsingPos', this.winPos);
-        asyncStorage.set('browsing', {
-          browsingSize: this.browsingSize,
-          browsingPos: this.browsingPos,
-          barrageOpen: this.barrageOpen,
-        }).finally(() => {
-          this.asyncTasksDone = true;
-          if (!this.isPip) {
-            window.close();
-          } else {
-            this.isGlobal = true;
-            this.$electron.ipcRenderer.send('remove-main-window');
-          }
-        });
+        asyncStorage
+          .set('browsing', {
+            browsingSize: this.browsingSize,
+            browsingPos: this.browsingPos,
+            barrageOpen: this.barrageOpen,
+          })
+          .finally(() => {
+            this.asyncTasksDone = true;
+            if (!this.isPip) {
+              window.close();
+            } else {
+              this.isGlobal = true;
+              this.$electron.ipcRenderer.send('remove-main-window');
+            }
+          });
       } else if (this.quit) {
         this.$electron.remote.app.quit();
       }
     },
     updateReload(val: boolean) {
       if (this.$electron.remote.getCurrentWindow().isFocused()) {
-        this.$electron.ipcRenderer.send('update-enabled', 'history.reload', val);
+        this.$electron.ipcRenderer.send(
+          'update-enabled',
+          'history.reload',
+          val,
+        );
       }
     },
     updatePipState(available: boolean) {
       if (this.$electron.remote.getCurrentWindow().isFocused()) {
-        this.menuService.updateMenuItemEnabled('browsing.window.pip', available);
+        this.menuService.updateMenuItemEnabled(
+          'browsing.window.pip',
+          available,
+        );
       }
     },
     updateCanGoBack(val: boolean) {
@@ -377,15 +490,29 @@ export default {
     },
     updateCanGoForward(val: boolean) {
       if (this.$electron.remote.getCurrentWindow().isFocused()) {
-        this.$electron.ipcRenderer.send('update-enabled', 'history.forward', val);
+        this.$electron.ipcRenderer.send(
+          'update-enabled',
+          'history.forward',
+          val,
+        );
       }
     },
     handleBookmarkOpen(url: string) {
-      const supportedPage = ['https://www.youtube.com/', 'https://www.bilibili.com/', 'https://www.iqiyi.com/'];
+      const supportedPage = [
+        'https://www.youtube.com/',
+        'https://www.bilibili.com/',
+        'https://www.iqiyi.com/',
+      ];
       const newHostname = urlParseLax(url).hostname;
       const oldHostname = urlParseLax(this.currentUrl).hostname;
-      let newChannel = newHostname.slice(newHostname.indexOf('.') + 1, newHostname.length);
-      let oldChannel = oldHostname.slice(oldHostname.indexOf('.') + 1, oldHostname.length);
+      let newChannel = newHostname.slice(
+        newHostname.indexOf('.') + 1,
+        newHostname.length,
+      );
+      let oldChannel = oldHostname.slice(
+        oldHostname.indexOf('.') + 1,
+        oldHostname.length,
+      );
       if (url.includes('youtube')) {
         newChannel = 'youtube.com';
       }
@@ -396,15 +523,22 @@ export default {
       if (newChannel !== oldChannel) {
         this.removeListener();
         this.$electron.ipcRenderer.send('change-channel', { url });
-      } else if (this.currentUrl === url && supportedPage.includes(this.currentUrl)) {
+      } else if (
+        this.currentUrl === url
+        && supportedPage.includes(this.currentUrl)
+      ) {
         this.currentMainBrowserView().webContents.reload();
       } else {
         const homePage = urlParseLax(`https://www.${newChannel}`).href;
-        this.$electron.ipcRenderer.send('create-browser-view', { url: homePage });
+        this.$electron.ipcRenderer.send('create-browser-view', {
+          url: homePage,
+        });
       }
     },
     addListenerToBrowser() {
-      const view = this.$electron.remote.getCurrentWindow().getBrowserViews()[0];
+      const view = this.$electron.remote
+        .getCurrentWindow()
+        .getBrowserViews()[0];
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       view.webContents.addListener('ipc-message', this.ipcMessage);
       view.webContents.addListener('dom-ready', this.domReady);
@@ -414,13 +548,21 @@ export default {
       view.webContents.addListener('will-navigate', this.willNavigate);
     },
     removeListener() {
-      const currentBrowserViews = this.$electron.remote.getCurrentWindow().getBrowserViews();
+      const currentBrowserViews = this.$electron.remote
+        .getCurrentWindow()
+        .getBrowserViews();
       if (currentBrowserViews.length) {
         const currentWebContents = currentBrowserViews[0].webContents;
-        currentWebContents.removeListener('did-stop-loading', this.didStopLoading);
+        currentWebContents.removeListener(
+          'did-stop-loading',
+          this.didStopLoading,
+        );
         currentWebContents.removeListener('dom-ready', this.domReady);
         currentWebContents.removeListener('ipc-message', this.ipcMessage);
-        currentWebContents.removeListener('did-start-loading', this.didStartLoading);
+        currentWebContents.removeListener(
+          'did-start-loading',
+          this.didStartLoading,
+        );
         currentWebContents.removeListener('new-window', this.newWindow);
         currentWebContents.removeListener('will-navigate', this.willNavigate);
       }
@@ -433,7 +575,11 @@ export default {
     willNavigate(e: Event, url: string) {
       if (!this.startLoading) {
         this.startLoading = true;
-        if (!url || url === 'about:blank' || urlParseLax(this.currentUrl).href === urlParseLax(url).href) return;
+        if (
+          !url
+          || url === 'about:blank'
+          || urlParseLax(this.currentUrl).href === urlParseLax(url).href
+        ) return;
         this.currentUrl = urlParseLax(url).href;
         this.startTime = new Date().getTime();
         this.loadingState = true;
@@ -443,9 +589,15 @@ export default {
     didStartLoading() {
       if (!this.startLoading) {
         this.startLoading = true;
-        const url = this.$electron.remote.getCurrentWindow()
-          .getBrowserView().webContents.getURL();
-        if (!url || url === 'about:blank' || urlParseLax(this.currentUrl).href === urlParseLax(url).href) return;
+        const url = this.$electron.remote
+          .getCurrentWindow()
+          .getBrowserView()
+          .webContents.getURL();
+        if (
+          !url
+          || url === 'about:blank'
+          || urlParseLax(this.currentUrl).href === urlParseLax(url).href
+        ) return;
         this.currentUrl = urlParseLax(url).href;
         this.startTime = new Date().getTime();
         this.loadingState = true;
@@ -476,14 +628,24 @@ export default {
         case 'left-drag':
           if (this.isPip) {
             if (args.windowSize) {
-              this.$electron.ipcRenderer.send('callBrowsingWindowMethod', 'setBounds', [{
-                x: args.x,
-                y: args.y,
-                width: args.windowSize[0],
-                height: args.windowSize[1],
-              }]);
+              this.$electron.ipcRenderer.send(
+                'callBrowsingWindowMethod',
+                'setBounds',
+                [
+                  {
+                    x: args.x,
+                    y: args.y,
+                    width: args.windowSize[0],
+                    height: args.windowSize[1],
+                  },
+                ],
+              );
             } else {
-              this.$electron.ipcRenderer.send('callBrowsingWindowMethod', 'setPosition', [args.x, args.y]);
+              this.$electron.ipcRenderer.send(
+                'callBrowsingWindowMethod',
+                'setPosition',
+                [args.x, args.y],
+              );
             }
           }
           break;
@@ -503,7 +665,10 @@ export default {
     },
     domReady() {
       window.focus();
-      this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.focus();
+      this.$electron.remote
+        .getCurrentWindow()
+        .getBrowserViews()[0]
+        .webContents.focus();
     },
     didStopLoading() {
       this.startLoading = false;
@@ -519,15 +684,24 @@ export default {
     handleOpenUrl({ url }: { url: string }) {
       if (!this.startLoading) {
         this.startLoading = true;
-        if (!url || url === 'about:blank' || urlParseLax(url).href === urlParseLax(this.currentUrl).href) return;
+        if (
+          !url
+          || url === 'about:blank'
+          || urlParseLax(url).href === urlParseLax(this.currentUrl).href
+        ) return;
         this.loadingState = true;
         this.currentUrl = urlParseLax(url).href;
         const protocol = urlParseLax(url).protocol;
-        this.$electron.ipcRenderer.send('create-browser-view', { url: protocol ? this.currentUrl : `https:${this.currentUrl}`, isNewWindow: true });
+        this.$electron.ipcRenderer.send('create-browser-view', {
+          url: protocol ? this.currentUrl : `https:${this.currentUrl}`,
+          isNewWindow: true,
+        });
       }
     },
     pipAdapter() {
-      const parseUrl = urlParseLax(this.currentMainBrowserView().webContents.getURL());
+      const parseUrl = urlParseLax(
+        this.currentMainBrowserView().webContents.getURL(),
+      );
       if (parseUrl.hostname.includes('youtube')) {
         this.pipType = 'youtube';
         this.youtubeAdapter();
@@ -546,26 +720,47 @@ export default {
       return this.$electron.remote.getCurrentWindow().getBrowserView();
     },
     handleWindowChangeEnterPip() {
-      const newDisplayId = this.$electron.remote.screen
-        .getDisplayNearestPoint({ x: this.winPos[0], y: this.winPos[1] }).id;
+      const newDisplayId = this.$electron.remote.screen.getDisplayNearestPoint({
+        x: this.winPos[0],
+        y: this.winPos[1],
+      }).id;
       const useDefaultPosition = !this.pipPos.length
         || (this.oldDisplayId !== newDisplayId && this.oldDisplayId !== -1);
       this.oldDisplayId = newDisplayId;
-      this.currentMainBrowserView().webContents
-        .executeJavaScript(this.getVideoStyle).then((result: CSSStyleDeclaration) => {
+      this.currentMainBrowserView()
+        .webContents.executeJavaScript(this.getVideoStyle)
+        .then((result: CSSStyleDeclaration) => {
           const videoAspectRatio = parseFloat(result.width as string)
             / parseFloat(result.height as string);
           if (useDefaultPosition) {
-            this.$store.dispatch('updatePipPos', [window.screen.availLeft + 70,
-              window.screen.availTop + window.screen.availHeight - 236 - 70])
+            this.$store
+              .dispatch('updatePipPos', [
+                window.screen.availLeft + 70,
+                window.screen.availTop + window.screen.availHeight - 236 - 70,
+              ])
               .then(() => {
-                this.$electron.ipcRenderer.send('callBrowsingWindowMethod', 'setPosition', [window.screen.availLeft + 70,
-                  window.screen.availTop + window.screen.availHeight - 236 - 70]);
+                this.$electron.ipcRenderer.send(
+                  'callBrowsingWindowMethod',
+                  'setPosition',
+                  [
+                    window.screen.availLeft + 70,
+                    window.screen.availTop
+                      + window.screen.availHeight
+                      - 236
+                      - 70,
+                  ],
+                );
               });
           }
           const calculateSize = this.pipSize[0] / this.pipSize[1] >= videoAspectRatio
-            ? [this.pipSize[0], Math.round(this.pipSize[0] / videoAspectRatio)]
-            : [Math.round(this.pipSize[1] * videoAspectRatio), this.pipSize[1]];
+            ? [
+              this.pipSize[0],
+              Math.round(this.pipSize[0] / videoAspectRatio),
+            ]
+            : [
+              Math.round(this.pipSize[1] * videoAspectRatio),
+              this.pipSize[1],
+            ];
           this.pipInfo = {
             aspectRatio: videoAspectRatio,
             minimumSize: [420, Math.round(420 / videoAspectRatio)],
@@ -575,17 +770,25 @@ export default {
         });
     },
     handleWindowChangeExitPip() {
-      const newDisplayId = this.$electron.remote.screen
-        .getDisplayNearestPoint({ x: this.winPos[0], y: this.winPos[1] }).id;
+      const newDisplayId = this.$electron.remote.screen.getDisplayNearestPoint({
+        x: this.winPos[0],
+        y: this.winPos[1],
+      }).id;
       this.oldDisplayId = newDisplayId;
     },
     handleDanmuDisplay() {
       if (this.pipType === 'iqiyi') {
         this.updateBarrageOpen(!this.barrageOpen);
-        this.$electron.ipcRenderer.send('handle-danmu-display', this.iqiyiBarrage);
+        this.$electron.ipcRenderer.send(
+          'handle-danmu-display',
+          this.iqiyiBarrage,
+        );
       } else if (this.pipType === 'bilibili') {
         this.updateBarrageOpen(!this.barrageOpen);
-        this.$electron.ipcRenderer.send('handle-danmu-display', this.bilibiliBarrage);
+        this.$electron.ipcRenderer.send(
+          'handle-danmu-display',
+          this.bilibiliBarrage,
+        );
       }
     },
     handleUrlForward() {
@@ -603,9 +806,15 @@ export default {
     handleUrlReload() {
       if (this.isPip) {
         this.pipRestore = true;
-        this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.reload();
+        this.$electron.remote
+          .getCurrentWindow()
+          .getBrowserViews()[0]
+          .webContents.reload();
       } else {
-        this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.reload();
+        this.$electron.remote
+          .getCurrentWindow()
+          .getBrowserViews()[0]
+          .webContents.reload();
       }
     },
     enterPipOperation() {
@@ -642,21 +851,34 @@ export default {
       if (this.isPip) {
         this.exitPipOperation();
         this.updateIsPip(false);
-        const loadUrl = this.$electron.remote.getCurrentWindow()
-          .getBrowserViews()[0].webContents.getURL();
+        const loadUrl = this.$electron.remote
+          .getCurrentWindow()
+          .getBrowserViews()[0]
+          .webContents.getURL();
         const hostname = urlParseLax(loadUrl).hostname;
-        let channel = hostname.slice(hostname.indexOf('.') + 1, hostname.length);
+        let channel = hostname.slice(
+          hostname.indexOf('.') + 1,
+          hostname.length,
+        );
         if (loadUrl.includes('youtube')) {
           channel = 'youtube.com';
         }
-        this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents
-          .executeJavaScript(this.calculateVideoNum, (r: number) => {
-            this.hasVideo = channel === 'youtube.com' && !getVideoId(loadUrl).id ? false : !!r;
-          });
+        this.$electron.remote
+          .getCurrentWindow()
+          .getBrowserViews()[0]
+          .webContents.executeJavaScript(
+            this.calculateVideoNum,
+            (r: number) => {
+              this.hasVideo = channel === 'youtube.com' && !getVideoId(loadUrl).id
+                ? false
+                : !!r;
+            },
+          );
       }
     },
     othersAdapter() {
-      this.currentMainBrowserView().webContents.executeJavaScript(this.othersPip.adapter)
+      this.currentMainBrowserView()
+        .webContents.executeJavaScript(this.othersPip.adapter)
         .then(() => {
           this.adaptFinished = true;
         });
@@ -665,12 +887,15 @@ export default {
       this.$electron.ipcRenderer.send('pip-watcher', this.othersPip.watcher);
     },
     othersRecover() {
-      this.$electron.remote.getCurrentWindow()
-        .getBrowserViews()[0].webContents.executeJavaScript(this.othersPip.recover);
+      this.$electron.remote
+        .getCurrentWindow()
+        .getBrowserViews()[0]
+        .webContents.executeJavaScript(this.othersPip.recover);
     },
     iqiyiAdapter() {
-      this.currentMainBrowserView().webContents
-        .executeJavaScript(this.iqiyiPip.adapter).then(() => {
+      this.currentMainBrowserView()
+        .webContents.executeJavaScript(this.iqiyiPip.adapter)
+        .then(() => {
           this.adaptFinished = true;
         });
     },
@@ -678,25 +903,42 @@ export default {
       this.$electron.ipcRenderer.send('pip-watcher', this.iqiyiPip.watcher);
     },
     iqiyiRecover() {
-      this.$electron.remote.getCurrentWindow()
-        .getBrowserViews()[0].webContents.executeJavaScript(this.iqiyiPip.recover);
+      this.$electron.remote
+        .getCurrentWindow()
+        .getBrowserViews()[0]
+        .webContents.executeJavaScript(this.iqiyiPip.recover);
     },
     youtubeAdapter() {
-      this.currentMainBrowserView().webContents.executeJavaScript(youtube.adapter).then(() => {
-        this.adaptFinished = true;
-      });
+      this.currentMainBrowserView()
+        .webContents.executeJavaScript(youtube.adapter)
+        .then(() => {
+          this.adaptFinished = true;
+        });
     },
     youtubeRecover() {
-      this.$electron.remote.getCurrentWindow()
-        .getBrowserViews()[0].webContents.executeJavaScript(youtube.recover);
+      this.$electron.remote
+        .getCurrentWindow()
+        .getBrowserViews()[0]
+        .webContents.executeJavaScript(youtube.recover);
     },
     bilibiliAdapter() {
-      this.currentMainBrowserView().webContents
-        .executeJavaScript(bilibiliFindType).then((r: (HTMLElement | null)[]) => {
-          this.bilibiliType = ['bangumi', 'videoStreaming', 'iframeStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
-        }).then(() => {
-          this.currentMainBrowserView().webContents.executeJavaScript(this.bilibiliPip.adapter);
-        }).then(() => {
+      this.currentMainBrowserView()
+        .webContents.executeJavaScript(bilibiliFindType)
+        .then((r: (HTMLElement | null)[]) => {
+          this.bilibiliType = [
+            'bangumi',
+            'videoStreaming',
+            'iframeStreaming',
+            'iframeStreaming',
+            'video',
+          ][r.findIndex(i => i)] || 'others';
+        })
+        .then(() => {
+          this.currentMainBrowserView().webContents.executeJavaScript(
+            this.bilibiliPip.adapter,
+          );
+        })
+        .then(() => {
           this.adaptFinished = true;
         });
     },
@@ -704,8 +946,10 @@ export default {
       this.$electron.ipcRenderer.send('pip-watcher', this.bilibiliPip.watcher);
     },
     bilibiliRecover() {
-      this.$electron.remote.getCurrentWindow()
-        .getBrowserViews()[0].webContents.executeJavaScript(this.bilibiliPip.recover);
+      this.$electron.remote
+        .getCurrentWindow()
+        .getBrowserViews()[0]
+        .webContents.executeJavaScript(this.bilibiliPip.recover);
     },
   },
 };
@@ -713,6 +957,7 @@ export default {
 
 <style scoped lang="scss">
 .browsing {
+  transition: width 100ms linear;
   position: absolute;
   right: 0;
   border-top-left-radius: 4px;
@@ -729,8 +974,15 @@ export default {
     width: 100%;
     height: 36px;
     position: absolute;
-    background-image: linear-gradient(-90deg, #414141 18%, #555555 34%,
-      #626262 51%, #626262 56%, #555555 69%, #414141 86%);
+    background-image: linear-gradient(
+      -90deg,
+      #414141 18%,
+      #555555 34%,
+      #626262 51%,
+      #626262 56%,
+      #555555 69%,
+      #414141 86%
+    );
   }
   .pip-buttons {
     width: 20px;
@@ -759,20 +1011,42 @@ export default {
   animation: control-hide 100ms linear 1 normal forwards;
 }
 @keyframes loading {
-  0% { transform: translateX(-100%) }
-  25% { transform: translateX(-50%) }
-  50% { transform: translateX(0%) }
-  75% { transform: translateX(50%) }
-  100% { transform: translateX(100%) }
+  0% {
+    transform: translateX(-100%);
+  }
+  25% {
+    transform: translateX(-50%);
+  }
+  50% {
+    transform: translateX(0%);
+  }
+  75% {
+    transform: translateX(50%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
 }
 @keyframes control-show {
-  0% { transform: translate(-50%, 110px) }
-  50% { transform: translate(-50%, 55px) }
-  100% { transform: translate(-50%, 0px) }
+  0% {
+    transform: translate(-50%, 110px);
+  }
+  50% {
+    transform: translate(-50%, 55px);
+  }
+  100% {
+    transform: translate(-50%, 0px);
+  }
 }
 @keyframes control-hide {
-  0% { transform: translate(-50%, 0px) }
-  50% { transform: translate(-50%, 55px) }
-  100% { transform: translate(-50%, 110px) }
+  0% {
+    transform: translate(-50%, 0px);
+  }
+  50% {
+    transform: translate(-50%, 55px);
+  }
+  100% {
+    transform: translate(-50%, 110px);
+  }
 }
 </style>
diff --git a/src/renderer/components/BrowsingView/BrowsingControl.vue b/src/renderer/components/BrowsingView/BrowsingControl.vue
index 39aa5335fe..23b6bbf646 100644
--- a/src/renderer/components/BrowsingView/BrowsingControl.vue
+++ b/src/renderer/components/BrowsingView/BrowsingControl.vue
@@ -6,9 +6,8 @@
     class="browsing-control"
   >
     <SidebarIcon
-      @mouseover.native="mouseoverSidebar = true"
-      @mouseout.native="mouseoverSidebar = false"
-      @mouseup.native="handleSidebar"
+      @mouseover="mouseoverSidebar = true"
+      @mouseout="mouseoverSidebar = false"
       :mouseover="mouseoverSidebar"
       class="sidebar no-drag"
     />
@@ -74,6 +73,8 @@ export default {
       return process.platform === 'darwin';
     },
   },
+  methods: {
+  },
 };
 </script>
 
diff --git a/src/renderer/components/BrowsingView/BrowsingHeader.vue b/src/renderer/components/BrowsingView/BrowsingHeader.vue
index ad108b4f71..24d89e1f49 100644
--- a/src/renderer/components/BrowsingView/BrowsingHeader.vue
+++ b/src/renderer/components/BrowsingView/BrowsingHeader.vue
@@ -1,6 +1,5 @@
 <template>
   <div
-    @dblclick="handleDbClick"
     class="header"
   >
     <browsing-control
@@ -10,20 +9,14 @@
       :back-type="backType"
       :forward-type="forwardType"
       :web-info="webInfo"
-      :style="{
-      }"
     />
     <browsing-input
       :close-url-input="closeUrlInput"
       :play-file-with-playing-view="playFileWithPlayingView"
-      :style="{
-      }"
     />
     <browsing-pip-control
       :handle-enter-pip="handleEnterPip"
       :handle-global-pip="handleGlobalPip"
-      :style="{
-      }"
     />
   </div>
 </template>
@@ -31,22 +24,22 @@
 <script lang="ts">
 import electron from 'electron';
 import { mapGetters } from 'vuex';
-import BrowsingFavicons from '@/components/BrowsingView/BrowsingFavicons.vue';
 import BrowsingInput from '@/components/BrowsingView/BrowsingInput.vue';
 import BrowsingControl from '@/components/BrowsingView/BrowsingControl.vue';
 import BrowsingPipControl from '@/components/BrowsingView/BrowsingPipControl.vue';
-import Icon from '@/components/BaseIconContainer.vue';
 
 export default {
   name: 'BrowsingHeader',
   components: {
-    'browsing-favicons': BrowsingFavicons,
     'browsing-input': BrowsingInput,
     'browsing-control': BrowsingControl,
     'browsing-pip-control': BrowsingPipControl,
-    Icon,
   },
   props: {
+    showSidebar: {
+      type: Boolean,
+      default: false,
+    },
     handleEnterPip: {
       type: Function,
       required: true,
@@ -114,13 +107,6 @@ export default {
     });
   },
   methods: {
-    handleDbClick() {
-      if (!this.isMaximized) {
-        electron.ipcRenderer.send('callMainWindowMethod', 'maximize');
-      } else {
-        electron.ipcRenderer.send('callMainWindowMethod', 'unmaximize');
-      }
-    },
     closeUrlInput() {
       this.$bus.$emit('open-url-show', false);
     },
@@ -146,9 +132,11 @@ export default {
 
 <style scoped lang="scss">
 .header {
+  position: absolute;
+  right: 0;
+  width: calc(100vw - 76px);
   border-top-left-radius: 4px;
   box-sizing: border-box;
-  width: 100%;
   height: 40px;
   display: flex;
   flex-direction: row;
diff --git a/src/renderer/components/BrowsingView/BrowsingInput.vue b/src/renderer/components/BrowsingView/BrowsingInput.vue
index c65e7c410d..bccb41f423 100644
--- a/src/renderer/components/BrowsingView/BrowsingInput.vue
+++ b/src/renderer/components/BrowsingView/BrowsingInput.vue
@@ -75,7 +75,7 @@ export default {
     width: 100%;
     height: 24px;
     outline: none;
-    background-color: #FFF; 
+    background-color: #FFF;
     border: none;
     z-index: 6;
     text-indent: 15px;
diff --git a/src/renderer/components/BrowsingView/BrowsingPipControl.vue b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
index 8581f13273..16c6d348b2 100644
--- a/src/renderer/components/BrowsingView/BrowsingPipControl.vue
+++ b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
@@ -49,4 +49,4 @@ export default {
     margin-left: 8px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/renderer/components/LandingView/SidebarIcon.vue b/src/renderer/components/LandingView/SidebarIcon.vue
index 5ded19fbd0..fd6c620502 100644
--- a/src/renderer/components/LandingView/SidebarIcon.vue
+++ b/src/renderer/components/LandingView/SidebarIcon.vue
@@ -1,5 +1,7 @@
 <template>
-  <div>
+  <div
+    @mouseup="handleSidebar"
+  >
     <svg
       :opacity="mouseover ? '1' : '0.5'"
       class="side-bar"
@@ -54,6 +56,11 @@ export default {
       this.highlight = highlight;
     });
   },
+  methods: {
+    handleSidebar() {
+      this.$event.emit('side-bar-mouseup');
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/renderer/components/Titlebar.vue b/src/renderer/components/Titlebar.vue
index 267caad318..ebaca40672 100644
--- a/src/renderer/components/Titlebar.vue
+++ b/src/renderer/components/Titlebar.vue
@@ -17,7 +17,6 @@
       <SidebarIcon
         @mouseover.native="mouseoverSidebar = true"
         @mouseout.native="mouseoverSidebar = false"
-        @mouseup.native="handleSidebar"
         :mouseover="mouseoverSidebar"
         :fill="isBrowsingView ? '#BBBACC' : ''"
         class="no-drag"
@@ -106,7 +105,6 @@
         v-if="isDarwin && isLandingView"
         @mouseover.native="mouseoverSidebar = true"
         @mouseout.native="mouseoverSidebar = false"
-        @mouseup.native="handleSidebar"
         :style="{
           marginLeft: showSidebar ? '19px' : '4px',
         }"
@@ -217,9 +215,6 @@ export default {
     });
   },
   methods: {
-    handleSidebar() {
-      this.$event.emit('side-bar-mouseup');
-    },
     handleDbClick() {
       if (!this.isMaximized) {
         this.$electron.ipcRenderer.send('callMainWindowMethod', 'maximize');
diff --git a/src/renderer/containers/LandingView.vue b/src/renderer/containers/LandingView.vue
index 39d0830100..9de613cb7d 100644
--- a/src/renderer/containers/LandingView.vue
+++ b/src/renderer/containers/LandingView.vue
@@ -156,6 +156,12 @@ export default {
     NotificationBubble,
     'open-url': OpenUrl,
   },
+  props: {
+    showSidebar: {
+      type: Boolean,
+      default: false,
+    },
+  },
   data() {
     return {
       landingViewItems: [],
@@ -169,7 +175,6 @@ export default {
       pageMounted: false,
       logoTransition: '',
       canHover: false,
-      showSidebar: false,
       playlistLeft: '0',
       playlistRight: '',
     };
@@ -301,10 +306,6 @@ export default {
     this.$bus.$on('drop', () => {
       if (this.$refs.mask) this.$refs.mask.style.setProperty('background-color', 'rgba(255, 255, 255, 0)');
     });
-    this.$event.on('side-bar-mouseup', () => {
-      this.showSidebar = !this.showSidebar;
-      this.$emit('update-side-bar', this.showSidebar);
-    });
   },
   async mounted() {
     this.$store.dispatch('refreshVersion');

From dc74b68f568c1f9c68dd5b28555f76800d72928d Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Tue, 3 Sep 2019 18:23:16 +0800
Subject: [PATCH 043/123] feat(sidebar): browsingview sidebar

---
 src/renderer/components/BrowsingView.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index d8b273bcfc..c9ef3b4140 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -140,6 +140,15 @@ export default {
     },
   },
   watch: {
+    showSidebar(val: boolean) {
+      const browserView = this.$electron.remote.getCurrentWindow().getBrowserViews()[0];
+      browserView.setBounds({
+        x: val ? 76 : 0,
+        y: 40,
+        width: val ? window.innerWidth - 76 : window.innerWidth,
+        height: window.innerHeight - 40,
+      });
+    },
     hasVideo(val: boolean) {
       this.$refs.browsingHeader.updateWebInfo({
         hasVideo: val,

From 25cd5cbfc106f6fae0f27554db9cab04c789cc2c Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Tue, 3 Sep 2019 18:26:04 +0800
Subject: [PATCH 044/123] fix(browsingview): fix pip window setPosition null

---
 src/renderer/components/BrowsingPip.vue  | 28 +++++++++++++-----------
 src/renderer/components/BrowsingView.vue |  1 -
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/BrowsingPip.vue b/src/renderer/components/BrowsingPip.vue
index d929023d2c..1f20118147 100644
--- a/src/renderer/components/BrowsingPip.vue
+++ b/src/renderer/components/BrowsingPip.vue
@@ -17,7 +17,6 @@ export default {
       asyncTasksDone: false,
       windowSize: [],
       offset: [],
-      movePos: [],
     };
   },
   computed: {
@@ -35,24 +34,27 @@ export default {
       this.windowSize = null;
     });
     electron.ipcRenderer.on('mouse-left-drag', (evt: Event, x: number, y: number) => {
-      if (!this.offset) {
-        const cursorPoint = electron.screen.getCursorScreenPoint();
+      if (!this.offset || !this.offset.length) {
+        const cursorPoint = electron.remote.screen.getCursorScreenPoint();
         const windowPos = electron.remote.getCurrentWindow().getPosition();
         this.offset = [cursorPoint.x - windowPos[0], cursorPoint.y - windowPos[1]];
         if (this.getRatio() !== 1) {
           this.windowSize = electron.remote.getCurrentWindow().getSize();
         }
-      }
-      x = Math.round((x / this.getRatio()) - this.offset[0]);
-      y = Math.round((y / this.getRatio()) - this.offset[1]);
-      if (this.isDarwin) {
-        electron.ipcRenderer.send('callBrowsingWindowMethod', 'setPosition', [x || 0, y || 0]);
-      } else if (this.windowSize) {
-        electron.ipcRenderer.send('callBrowsingWindowMethod', 'setBounds', [{
-          x, y, width: this.windowSize[0], height: this.windowSize[1],
-        }]);
       } else {
-        electron.ipcRenderer.send('callBrowsingWindowMethod', 'setPosition', [x, y]);
+        x = Math.round((x / this.getRatio()) - this.offset[0]) === 0
+          ? 0 : Math.round((x / this.getRatio()) - this.offset[0]);
+        y = Math.round((y / this.getRatio()) - this.offset[1]) === 0
+          ? 0 : Math.round((y / this.getRatio()) - this.offset[1]);
+        if (this.isDarwin) {
+          electron.ipcRenderer.send('callBrowsingWindowMethod', 'setPosition', [x, y]);
+        } else if (this.windowSize) {
+          electron.ipcRenderer.send('callBrowsingWindowMethod', 'setBounds', [{
+            x, y, width: this.windowSize[0], height: this.windowSize[1],
+          }]);
+        } else {
+          electron.ipcRenderer.send('callBrowsingWindowMethod', 'setPosition', [x, y]);
+        }
       }
     });
     this.menuService = new MenuService();
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index bbd5b5e1bd..e16c99deb4 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -408,7 +408,6 @@ export default {
     },
     addListenerToBrowser() {
       const view = this.$electron.remote.getCurrentWindow().getBrowserViews()[0];
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       view.webContents.addListener('ipc-message', this.ipcMessage);
       view.webContents.addListener('dom-ready', this.domReady);
       view.webContents.addListener('new-window', this.newWindow);

From 6d496fc6ee7913aca1afa47ded4cc8734e1deb59 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Tue, 3 Sep 2019 18:54:40 +0800
Subject: [PATCH 045/123] feat(icon): icon adjustment

---
 src/renderer/assets/icon/back-default-icon.svg        |  2 +-
 .../assets/icon/backDisabled-default-icon.svg         |  2 +-
 src/renderer/assets/icon/forward-default-icon.svg     |  2 +-
 .../assets/icon/forwardDisabled-default-icon.svg      |  2 +-
 src/renderer/assets/icon/pageRefresh-default-icon.svg |  2 +-
 src/renderer/assets/icon/pageRefresh-hover-icon.svg   |  2 +-
 .../components/BrowsingView/BrowsingInput.vue         | 11 ++++-------
 7 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/renderer/assets/icon/back-default-icon.svg b/src/renderer/assets/icon/back-default-icon.svg
index 01a306ca22..e4af55c65c 100644
--- a/src/renderer/assets/icon/back-default-icon.svg
+++ b/src/renderer/assets/icon/back-default-icon.svg
@@ -1,5 +1,5 @@
 <svg width="15px" height="14px" viewBox="0 0 15 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.7">
+    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="browseing" transform="translate(-81.000000, -11.000000)" fill="#BBBACC">
             <g id="back" transform="translate(81.000000, 11.000000)">
                 <path d="M2.5034271,7.75214251 L6.53829467,12.6741045 C6.77841425,12.9670161 6.76245981,13.3929889 6.50110221,13.6671181 L6.39621564,13.7771301 C6.12143551,14.0653377 5.66504376,14.0762228 5.37683614,13.8014427 C5.35550942,13.7811096 5.33544922,13.7594883 5.31676839,13.7367003 L0.362980511,7.69378681 C0.345414441,7.67860066 0.32841789,7.6624305 0.312064596,7.64527808 L0.207178032,7.53526609 C0.0653333835,7.38649001 -0.00422832962,7.19298876 0.000198711274,7.00030653 C-0.00422832963,6.80762431 0.0653333835,6.61412306 0.207178032,6.46534698 L0.312064596,6.35533499 C0.32841789,6.33818257 0.345414441,6.32201241 0.362980511,6.30682626 L5.31676839,0.263912758 C5.33544922,0.241124813 5.35550942,0.219503464 5.37683614,0.199170357 C5.66504376,-0.0756097699 6.12143551,-0.064724629 6.39621564,0.223482999 L6.50110221,0.333494986 C6.76245981,0.607624187 6.77841425,1.03359697 6.53829467,1.32650856 L2.52743897,6.21917951 L14.2381711,6.21917951 C14.6614871,6.21917951 15.0046526,6.56234497 15.0046526,6.98566101 C15.0046526,7.40897705 14.6614871,7.75214251 14.2381711,7.75214251 L2.5034271,7.75214251 Z" id="形状结合"></path>
diff --git a/src/renderer/assets/icon/backDisabled-default-icon.svg b/src/renderer/assets/icon/backDisabled-default-icon.svg
index dd008368aa..cab0c512e0 100644
--- a/src/renderer/assets/icon/backDisabled-default-icon.svg
+++ b/src/renderer/assets/icon/backDisabled-default-icon.svg
@@ -1,5 +1,5 @@
 <svg width="15px" height="14px" viewBox="0 0 15 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.15">
+    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.3">
         <g id="browseing" transform="translate(-81.000000, -11.000000)" fill="#BBBACC">
             <g id="back" transform="translate(81.000000, 11.000000)">
                 <path d="M2.5034271,7.75214251 L6.53829467,12.6741045 C6.77841425,12.9670161 6.76245981,13.3929889 6.50110221,13.6671181 L6.39621564,13.7771301 C6.12143551,14.0653377 5.66504376,14.0762228 5.37683614,13.8014427 C5.35550942,13.7811096 5.33544922,13.7594883 5.31676839,13.7367003 L0.362980511,7.69378681 C0.345414441,7.67860066 0.32841789,7.6624305 0.312064596,7.64527808 L0.207178032,7.53526609 C0.0653333835,7.38649001 -0.00422832962,7.19298876 0.000198711274,7.00030653 C-0.00422832963,6.80762431 0.0653333835,6.61412306 0.207178032,6.46534698 L0.312064596,6.35533499 C0.32841789,6.33818257 0.345414441,6.32201241 0.362980511,6.30682626 L5.31676839,0.263912758 C5.33544922,0.241124813 5.35550942,0.219503464 5.37683614,0.199170357 C5.66504376,-0.0756097699 6.12143551,-0.064724629 6.39621564,0.223482999 L6.50110221,0.333494986 C6.76245981,0.607624187 6.77841425,1.03359697 6.53829467,1.32650856 L2.52743897,6.21917951 L14.2381711,6.21917951 C14.6614871,6.21917951 15.0046526,6.56234497 15.0046526,6.98566101 C15.0046526,7.40897705 14.6614871,7.75214251 14.2381711,7.75214251 L2.5034271,7.75214251 Z" id="形状结合"></path>
diff --git a/src/renderer/assets/icon/forward-default-icon.svg b/src/renderer/assets/icon/forward-default-icon.svg
index ba36a7e021..74d82f3ee7 100644
--- a/src/renderer/assets/icon/forward-default-icon.svg
+++ b/src/renderer/assets/icon/forward-default-icon.svg
@@ -1,5 +1,5 @@
 <svg width="15px" height="14px" viewBox="0 0 15 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.7">
+    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="browseing" transform="translate(-116.000000, -11.000000)" fill="#BBBACC">
             <g id="back" transform="translate(123.500000, 18.000000) scale(-1, 1) translate(-123.500000, -18.000000) translate(116.000000, 11.000000)">
                 <path d="M2.5034271,7.75214251 L6.53829467,12.6741045 C6.77841425,12.9670161 6.76245981,13.3929889 6.50110221,13.6671181 L6.39621564,13.7771301 C6.12143551,14.0653377 5.66504376,14.0762228 5.37683614,13.8014427 C5.35550942,13.7811096 5.33544922,13.7594883 5.31676839,13.7367003 L0.362980511,7.69378681 C0.345414441,7.67860066 0.32841789,7.6624305 0.312064596,7.64527808 L0.207178032,7.53526609 C0.0653333835,7.38649001 -0.00422832962,7.19298876 0.000198711274,7.00030653 C-0.00422832963,6.80762431 0.0653333835,6.61412306 0.207178032,6.46534698 L0.312064596,6.35533499 C0.32841789,6.33818257 0.345414441,6.32201241 0.362980511,6.30682626 L5.31676839,0.263912758 C5.33544922,0.241124813 5.35550942,0.219503464 5.37683614,0.199170357 C5.66504376,-0.0756097699 6.12143551,-0.064724629 6.39621564,0.223482999 L6.50110221,0.333494986 C6.76245981,0.607624187 6.77841425,1.03359697 6.53829467,1.32650856 L2.52743897,6.21917951 L14.2381711,6.21917951 C14.6614871,6.21917951 15.0046526,6.56234497 15.0046526,6.98566101 C15.0046526,7.40897705 14.6614871,7.75214251 14.2381711,7.75214251 L2.5034271,7.75214251 Z" id="形状结合"></path>
diff --git a/src/renderer/assets/icon/forwardDisabled-default-icon.svg b/src/renderer/assets/icon/forwardDisabled-default-icon.svg
index 97e349cfad..c6ce665649 100644
--- a/src/renderer/assets/icon/forwardDisabled-default-icon.svg
+++ b/src/renderer/assets/icon/forwardDisabled-default-icon.svg
@@ -1,5 +1,5 @@
 <svg width="15px" height="14px" viewBox="0 0 15 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.15">
+    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.3">
         <g id="browseing" transform="translate(-116.000000, -11.000000)" fill="#BBBACC">
             <g id="back" transform="translate(123.500000, 18.000000) scale(-1, 1) translate(-123.500000, -18.000000) translate(116.000000, 11.000000)">
                 <path d="M2.5034271,7.75214251 L6.53829467,12.6741045 C6.77841425,12.9670161 6.76245981,13.3929889 6.50110221,13.6671181 L6.39621564,13.7771301 C6.12143551,14.0653377 5.66504376,14.0762228 5.37683614,13.8014427 C5.35550942,13.7811096 5.33544922,13.7594883 5.31676839,13.7367003 L0.362980511,7.69378681 C0.345414441,7.67860066 0.32841789,7.6624305 0.312064596,7.64527808 L0.207178032,7.53526609 C0.0653333835,7.38649001 -0.00422832962,7.19298876 0.000198711274,7.00030653 C-0.00422832963,6.80762431 0.0653333835,6.61412306 0.207178032,6.46534698 L0.312064596,6.35533499 C0.32841789,6.33818257 0.345414441,6.32201241 0.362980511,6.30682626 L5.31676839,0.263912758 C5.33544922,0.241124813 5.35550942,0.219503464 5.37683614,0.199170357 C5.66504376,-0.0756097699 6.12143551,-0.064724629 6.39621564,0.223482999 L6.50110221,0.333494986 C6.76245981,0.607624187 6.77841425,1.03359697 6.53829467,1.32650856 L2.52743897,6.21917951 L14.2381711,6.21917951 C14.6614871,6.21917951 15.0046526,6.56234497 15.0046526,6.98566101 C15.0046526,7.40897705 14.6614871,7.75214251 14.2381711,7.75214251 L2.5034271,7.75214251 Z" id="形状结合"></path>
diff --git a/src/renderer/assets/icon/pageRefresh-default-icon.svg b/src/renderer/assets/icon/pageRefresh-default-icon.svg
index 88dd7cc223..5ff0e26d9a 100644
--- a/src/renderer/assets/icon/pageRefresh-default-icon.svg
+++ b/src/renderer/assets/icon/pageRefresh-default-icon.svg
@@ -2,7 +2,7 @@
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
     <desc>Created with Sketch.</desc>
-    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.7">
+    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="browseing" transform="translate(-340.000000, -323.000000)" fill="#BBBACC" fill-rule="nonzero">
             <g id="control-bar" transform="translate(238.000000, 300.000000)">
                 <g id="icon-refresh" transform="translate(98.000000, 19.000000)">
diff --git a/src/renderer/assets/icon/pageRefresh-hover-icon.svg b/src/renderer/assets/icon/pageRefresh-hover-icon.svg
index f686f24c00..3a931e56e0 100644
--- a/src/renderer/assets/icon/pageRefresh-hover-icon.svg
+++ b/src/renderer/assets/icon/pageRefresh-hover-icon.svg
@@ -3,7 +3,7 @@
     <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
     <desc>Created with Sketch.</desc>
     <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="1">
-        <g id="browseing" transform="translate(-340.000000, -323.000000)" fill="#FFFFFF" fill-rule="nonzero">
+        <g id="browseing" transform="translate(-340.000000, -323.000000)" fill="#6F7078" fill-rule="nonzero">
             <g id="control-bar" transform="translate(238.000000, 300.000000)">
                 <g id="icon-refresh" transform="translate(98.000000, 19.000000)">
                     <path d="M19.9275636,23.9920296 C20.3650254,23.4227245 20.2581454,22.6065787 19.6888403,22.1691168 C19.1195352,21.7316549 18.3033893,21.838535 17.8659275,22.4078401 C16.98761,23.5508667 16.3399248,24.4093268 15.9201976,24.9870317 C15.70106,25.2886488 15.5406853,25.5182327 15.433665,25.684841 C15.3602796,25.7990867 15.3053307,25.8928755 15.2591332,25.9907264 C15.2027547,26.105821 15.2027547,26.105821 15.1306023,26.4247782 C15.0986066,26.7012347 15.0986066,26.7012347 15.3087888,27.266275 C15.8834144,27.8466713 15.8834144,27.8466713 16.4822263,27.8963696 C22.760792,27.6355905 27.8,22.2689278 27.8,15.9070924 C27.8,12.4110703 26.2702442,9.16081599 23.6658784,6.9325943 C21.5446155,5.11770182 18.8489726,4.10249962 16,4.10249962 C9.48291266,4.10249962 4.2,9.38772305 4.2,15.9070924 C4.2,18.5715924 5.08653001,21.1044742 6.69120849,23.1623351 C7.83714485,24.631899 9.3164956,25.8144882 11.0052919,26.6047987 C11.6555786,26.9091151 12.4294372,26.6286508 12.7337536,25.9783642 C13.03807,25.3280775 12.7576057,24.5542189 12.107319,24.2499025 C10.7908372,23.633825 9.63608734,22.7107209 8.74153335,21.563533 C7.49000766,19.9585599 6.8,17.9871571 6.8,15.9070924 C6.8,10.8234089 10.9191076,6.70249962 16,6.70249962 C18.2232077,6.70249962 20.320979,7.49253827 21.9756109,8.90819441 C24.0085468,10.6475168 25.2,13.1789836 25.2,15.9070924 C25.2,19.7782293 22.8118095,23.1835609 19.4592128,24.603186 C19.6070218,24.4097288 19.7631448,24.2060013 19.9275636,23.9920296 Z" id="refresh" transform="translate(16.000000, 15.999435) rotate(-126.000000) translate(-16.000000, -15.999435) "></path>
diff --git a/src/renderer/components/BrowsingView/BrowsingInput.vue b/src/renderer/components/BrowsingView/BrowsingInput.vue
index bccb41f423..1289152327 100644
--- a/src/renderer/components/BrowsingView/BrowsingInput.vue
+++ b/src/renderer/components/BrowsingView/BrowsingInput.vue
@@ -2,13 +2,11 @@
   <div
     class="search-url"
   >
-    <input
-      ref="searchValue"
-      @keypress="handleSearchKey"
+    <div
       class="url-search"
-      placeholder="Splayer"
-      onfocus="select()"
     >
+      Splayer
+    </div>
     <Icon
       @mouseup.native="handleUrlReload"
       :style="{
@@ -73,12 +71,11 @@ export default {
   z-index: 6;
   .url-search {
     width: 100%;
-    height: 24px;
+    height: 40px;
     outline: none;
     background-color: #FFF;
     border: none;
     z-index: 6;
-    text-indent: 15px;
 
     font-size: 12px;
     color: rgba(15, 26, 59, 0.5);

From 723ca75b5d2f4f10078a82659b7680ae3794c70d Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Tue, 3 Sep 2019 19:03:24 +0800
Subject: [PATCH 046/123] feat(sidebar): browsing view

---
 src/renderer/components/BrowsingView.vue | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index c9ef3b4140..cd49561863 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -142,12 +142,23 @@ export default {
   watch: {
     showSidebar(val: boolean) {
       const browserView = this.$electron.remote.getCurrentWindow().getBrowserViews()[0];
-      browserView.setBounds({
-        x: val ? 76 : 0,
-        y: 40,
-        width: val ? window.innerWidth - 76 : window.innerWidth,
-        height: window.innerHeight - 40,
-      });
+      if (!val) {
+        setTimeout(() => {
+          browserView.setBounds({
+            x: val ? 76 : 0,
+            y: 40,
+            width: val ? window.innerWidth - 76 : window.innerWidth,
+            height: window.innerHeight - 40,
+          });
+        }, 100);
+      } else {
+        browserView.setBounds({
+          x: val ? 76 : 0,
+          y: 40,
+          width: val ? window.innerWidth - 76 : window.innerWidth,
+          height: window.innerHeight - 40,
+        });
+      }
     },
     hasVideo(val: boolean) {
       this.$refs.browsingHeader.updateWebInfo({

From 05fe5d572a900a781fac09f17dc0222e85b805dc Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Tue, 3 Sep 2019 19:16:59 +0800
Subject: [PATCH 047/123] feat(icon): forward backward icon

---
 src/renderer/assets/icon/back-hover-icon.svg           | 2 +-
 src/renderer/assets/icon/forward-hover-icon.svg        | 2 +-
 src/renderer/components/BrowsingView/BrowsingInput.vue | 4 +---
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/renderer/assets/icon/back-hover-icon.svg b/src/renderer/assets/icon/back-hover-icon.svg
index d4ac3d60aa..e6a9da2de5 100644
--- a/src/renderer/assets/icon/back-hover-icon.svg
+++ b/src/renderer/assets/icon/back-hover-icon.svg
@@ -1,6 +1,6 @@
 <svg width="15px" height="14px" viewBox="0 0 15 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="1">
-        <g id="browseing" transform="translate(-81.000000, -11.000000)" fill="#FFFFFF">
+        <g id="browseing" transform="translate(-81.000000, -11.000000)" fill="#6F7078">
             <g id="back" transform="translate(81.000000, 11.000000)">
                 <path d="M2.5034271,7.75214251 L6.53829467,12.6741045 C6.77841425,12.9670161 6.76245981,13.3929889 6.50110221,13.6671181 L6.39621564,13.7771301 C6.12143551,14.0653377 5.66504376,14.0762228 5.37683614,13.8014427 C5.35550942,13.7811096 5.33544922,13.7594883 5.31676839,13.7367003 L0.362980511,7.69378681 C0.345414441,7.67860066 0.32841789,7.6624305 0.312064596,7.64527808 L0.207178032,7.53526609 C0.0653333835,7.38649001 -0.00422832962,7.19298876 0.000198711274,7.00030653 C-0.00422832963,6.80762431 0.0653333835,6.61412306 0.207178032,6.46534698 L0.312064596,6.35533499 C0.32841789,6.33818257 0.345414441,6.32201241 0.362980511,6.30682626 L5.31676839,0.263912758 C5.33544922,0.241124813 5.35550942,0.219503464 5.37683614,0.199170357 C5.66504376,-0.0756097699 6.12143551,-0.064724629 6.39621564,0.223482999 L6.50110221,0.333494986 C6.76245981,0.607624187 6.77841425,1.03359697 6.53829467,1.32650856 L2.52743897,6.21917951 L14.2381711,6.21917951 C14.6614871,6.21917951 15.0046526,6.56234497 15.0046526,6.98566101 C15.0046526,7.40897705 14.6614871,7.75214251 14.2381711,7.75214251 L2.5034271,7.75214251 Z" id="形状结合"></path>
             </g>
diff --git a/src/renderer/assets/icon/forward-hover-icon.svg b/src/renderer/assets/icon/forward-hover-icon.svg
index 117aae523c..c8604c8f07 100644
--- a/src/renderer/assets/icon/forward-hover-icon.svg
+++ b/src/renderer/assets/icon/forward-hover-icon.svg
@@ -1,6 +1,6 @@
 <svg width="15px" height="14px" viewBox="0 0 15 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="1">
-        <g id="browseing" transform="translate(-116.000000, -11.000000)" fill="#FFFFFF">
+        <g id="browseing" transform="translate(-116.000000, -11.000000)" fill="#6F67078">
             <g id="back" transform="translate(123.500000, 18.000000) scale(-1, 1) translate(-123.500000, -18.000000) translate(116.000000, 11.000000)">
                 <path d="M2.5034271,7.75214251 L6.53829467,12.6741045 C6.77841425,12.9670161 6.76245981,13.3929889 6.50110221,13.6671181 L6.39621564,13.7771301 C6.12143551,14.0653377 5.66504376,14.0762228 5.37683614,13.8014427 C5.35550942,13.7811096 5.33544922,13.7594883 5.31676839,13.7367003 L0.362980511,7.69378681 C0.345414441,7.67860066 0.32841789,7.6624305 0.312064596,7.64527808 L0.207178032,7.53526609 C0.0653333835,7.38649001 -0.00422832962,7.19298876 0.000198711274,7.00030653 C-0.00422832963,6.80762431 0.0653333835,6.61412306 0.207178032,6.46534698 L0.312064596,6.35533499 C0.32841789,6.33818257 0.345414441,6.32201241 0.362980511,6.30682626 L5.31676839,0.263912758 C5.33544922,0.241124813 5.35550942,0.219503464 5.37683614,0.199170357 C5.66504376,-0.0756097699 6.12143551,-0.064724629 6.39621564,0.223482999 L6.50110221,0.333494986 C6.76245981,0.607624187 6.77841425,1.03359697 6.53829467,1.32650856 L2.52743897,6.21917951 L14.2381711,6.21917951 C14.6614871,6.21917951 15.0046526,6.56234497 15.0046526,6.98566101 C15.0046526,7.40897705 14.6614871,7.75214251 14.2381711,7.75214251 L2.5034271,7.75214251 Z" id="形状结合"></path>
             </g>
diff --git a/src/renderer/components/BrowsingView/BrowsingInput.vue b/src/renderer/components/BrowsingView/BrowsingInput.vue
index 1289152327..322617f847 100644
--- a/src/renderer/components/BrowsingView/BrowsingInput.vue
+++ b/src/renderer/components/BrowsingView/BrowsingInput.vue
@@ -67,11 +67,10 @@ export default {
   justify-content: flex-start;
   align-items: center;
   width: 100%;
-  height: 24px;
+  height: 40px;
   z-index: 6;
   .url-search {
     width: 100%;
-    height: 40px;
     outline: none;
     background-color: #FFF;
     border: none;
@@ -81,7 +80,6 @@ export default {
     color: rgba(15, 26, 59, 0.5);
     letter-spacing: 0.09px;
     text-align: center;
-    line-height: 40px;
   }
   .page-refresh-icon {
     width: 16px;

From bd9b9f0ea0c0190a937e8186f41c2ee0683102da Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Wed, 4 Sep 2019 15:40:35 +0800
Subject: [PATCH 048/123] feat(sidebar): use different method

---
 src/renderer/App.vue                     |  1 -
 src/renderer/components/BrowsingView.vue |  5 +----
 src/renderer/components/Sidebar.vue      | 20 ++++++++++++--------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index cb70dad7eb..bfe1d3f57e 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -28,7 +28,6 @@
         }"
         :open-file-args="openFileArgs"
         :show-sidebar="showSidebar"
-        @update-side-bar="showSidebar = $event"
       />
     </transition>
   </div>
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 86e23cc92b..3d606d4250 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -28,10 +28,6 @@
       }"
       v-show="maskToShow"
     />
-    <div
-      v-show="loadingState && headerToShow"
-      class="loading-state loading-animation"
-    />
     <NotificationBubble />
   </div>
 </template>
@@ -324,6 +320,7 @@ export default {
         }
       }, 0);
     });
+    this.$bus.$on('sidebar-selected', this.handleBookmarkOpen);
     window.addEventListener('focus', this.focusHandler);
     window.addEventListener('beforeunload', this.beforeUnloadHandler);
     this.$bus.$on('back-to-landingview', () => {
diff --git a/src/renderer/components/Sidebar.vue b/src/renderer/components/Sidebar.vue
index c58511d032..c872f15017 100644
--- a/src/renderer/components/Sidebar.vue
+++ b/src/renderer/components/Sidebar.vue
@@ -36,16 +36,20 @@ export default {
   },
   methods: {
     handleSidebarIcon(site: string) {
-      asyncStorage.get('browsingPip').then((data) => {
-        this.$store.dispatch('updatePipSize', data.pipSize || this.pipSize);
-        this.$store.dispatch('updatePipPos', data.pipPos || this.pipPos);
-        this.$electron.ipcRenderer.send('add-browsing', { size: data.pipSize || this.pipSize, position: data.pipPos || this.pipPos });
-      });
       const url = `https://www.${site}.com`;
-      this.$electron.ipcRenderer.send('change-channel', { url, sidebar: this.showSidebar });
-      if (this.$router.currentRoute.name !== 'browsing-view') this.$router.push({ name: 'browsing-view' });
-    },
 
+      if (this.$route.name === 'browsing-view') {
+        this.$bus.$emit('sidebar-selected', url);
+      } else {
+        asyncStorage.get('browsingPip').then((data) => {
+          this.$store.dispatch('updatePipSize', data.pipSize || this.pipSize);
+          this.$store.dispatch('updatePipPos', data.pipPos || this.pipPos);
+          this.$electron.ipcRenderer.send('add-browsing', { size: data.pipSize || this.pipSize, position: data.pipPos || this.pipPos });
+        });
+        this.$electron.ipcRenderer.send('change-channel', { url, sidebar: this.showSidebar });
+        if (this.$router.currentRoute.name !== 'browsing-view') this.$router.push({ name: 'browsing-view' });
+      }
+    },
   },
 };
 </script>

From 2adf318c2af836ab5bcb9ec86cc953db48d986d8 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Wed, 4 Sep 2019 16:13:39 +0800
Subject: [PATCH 049/123] fix(sidebar): fix sidebar  issue

---
 src/main/index.js    | 28 ++++++++++++++++++++++------
 src/renderer/App.vue |  3 +++
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index 1408c9faf4..32d3207706 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -59,6 +59,7 @@ if (process.env.NODE_ENV !== 'development') {
 
 app.commandLine.appendSwitch('autoplay-policy', 'no-user-gesture-required');
 
+let sidebar = false;
 let welcomeProcessDone = false;
 let menuService = null;
 let routeName = null;
@@ -502,7 +503,10 @@ function registerMainWindowEvent(mainWindow) {
       });
     }, 150);
     newBrowser.page.view.setBounds({
-      x: 0, y: 36, width: mainWindow.getSize()[0], height: mainWindow.getSize()[1] - 36,
+      x: sidebar ? 76 : 0,
+      y: 40,
+      width: sidebar ? mainWindow.getSize()[0] - 76 : mainWindow.getSize()[0],
+      height: mainWindow.getSize()[1] - 40,
     });
     newBrowser.page.view.setAutoResize({
       width: true, height: true,
@@ -529,9 +533,9 @@ function registerMainWindowEvent(mainWindow) {
       });
     }, 150);
     view.setBounds({
-      x: args.sidebar ? 76 : 0,
+      x: sidebar ? 76 : 0,
       y: 40,
-      width: args.sidebar ? mainWindow.getSize()[0] - 76 : mainWindow.getSize()[0],
+      width: sidebar ? mainWindow.getSize()[0] - 76 : mainWindow.getSize()[0],
       height: mainWindow.getSize()[1] - 40,
     });
     view.setAutoResize({
@@ -699,7 +703,10 @@ function registerMainWindowEvent(mainWindow) {
       mainWindow.hide();
     }
     mainBrowser.page.view.setBounds({
-      x: 0, y: 36, width: mainWindow.getSize()[0], height: mainWindow.getSize()[1] - 36,
+      x: sidebar ? 76 : 0,
+      y: 40,
+      width: sidebar ? mainWindow.getSize()[0] - 76 : mainWindow.getSize()[0],
+      height: mainWindow.getSize()[1] - 40,
     });
     mainBrowser.page.view.setAutoResize({
       width: true, height: true,
@@ -755,7 +762,10 @@ function registerMainWindowEvent(mainWindow) {
     browsingWindow.setAspectRatio(args.pipInfo.aspectRatio);
     browsingWindow.setMinimumSize(args.pipInfo.minimumSize[0], args.pipInfo.minimumSize[1]);
     mainBrowser.page.view.setBounds({
-      x: 0, y: 36, width: mainWindow.getSize()[0], height: mainWindow.getSize()[1] - 36,
+      x: sidebar ? 76 : 0,
+      y: 40,
+      width: sidebar ? mainWindow.getSize()[0] - 76 : mainWindow.getSize()[0],
+      height: mainWindow.getSize()[1] - 40,
     });
     mainBrowser.page.view.setAutoResize({
       width: true,
@@ -784,6 +794,9 @@ function registerMainWindowEvent(mainWindow) {
   ipcMain.on('update-pip-size', (evt, args) => {
     mainWindow.send('update-pip-size', args);
   });
+  ipcMain.on('update-sidebar', (evt, sidebarstate) => {
+    sidebar = sidebarstate;
+  });
   ipcMain.on('set-bounds', (evt, args) => {
     if (pipControlView) pipControlView.setBounds(args.control);
     if (titlebarView) titlebarView.setBounds(args.titlebar);
@@ -800,7 +813,10 @@ function registerMainWindowEvent(mainWindow) {
     const exitBrowser = browserViewManager.exitPip();
     mainWindow.addBrowserView(exitBrowser.page.view);
     exitBrowser.page.view.setBounds({
-      x: 0, y: 36, width: mainWindow.getSize()[0], height: mainWindow.getSize()[1] - 36,
+      x: sidebar ? 76 : 0,
+      y: 40,
+      width: sidebar ? mainWindow.getSize()[0] - 76 : mainWindow.getSize()[0],
+      height: mainWindow.getSize()[1] - 40,
     });
     exitBrowser.page.view.setAutoResize({
       width: true,
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index bfe1d3f57e..6cb676a3a0 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -60,6 +60,9 @@ export default {
       else this.transitionMode = '';
       if (to.name !== 'browsing-view') this.showSidebar = false;
     },
+    showSidebar(val: boolean) {
+      ipcRenderer.send('update-sidebar', val);
+    },
   },
   mounted() {
     this.$event.on('side-bar-mouseup', () => {

From e6ae5ff7a9e13663d3ab13b4f4ba945538d50c14 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Wed, 4 Sep 2019 17:09:53 +0800
Subject: [PATCH 050/123] feat(browsing): browsingcontrol

---
 .../assets/icon/sidebar-default-icon.svg      | 15 +++
 src/renderer/components/BaseIconContainer.vue | 41 +--------
 .../BrowsingView/BrowsingControl.vue          | 92 +++++++++++--------
 3 files changed, 72 insertions(+), 76 deletions(-)
 create mode 100644 src/renderer/assets/icon/sidebar-default-icon.svg

diff --git a/src/renderer/assets/icon/sidebar-default-icon.svg b/src/renderer/assets/icon/sidebar-default-icon.svg
new file mode 100644
index 0000000000..2d7a27d2a9
--- /dev/null
+++ b/src/renderer/assets/icon/sidebar-default-icon.svg
@@ -0,0 +1,15 @@
+<svg width="14px" height="12px" viewBox="0 0 14 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="各类图标的鼠标悬浮状态" transform="translate(-92.000000, -14.000000)" fill="#B8BACC">
+            <g id="browserArea" transform="translate(76.000000, 0.000000)">
+                <g id="menuBar">
+                    <g id="button--sidebar" transform="translate(8.000000, 5.000000)">
+                        <g id="icon" transform="translate(8.000000, 9.000000)">
+                            <path d="M13.1966203,10.15 C13.6384481,10.15 13.9966203,10.5081722 13.9966203,10.95 C13.9966203,11.3918278 13.6384481,11.75 13.1966203,11.75 L0.803379678,11.75 C0.361551878,11.75 0.00337967812,11.3918278 0.00337967812,10.95 C0.00337967812,10.5081722 0.361551878,10.15 0.803379678,10.15 L13.1966203,10.15 Z M13.1966203,5.2 C13.6384481,5.2 13.9966203,5.5581722 13.9966203,6 C13.9966203,6.4418278 13.6384481,6.8 13.1966203,6.8 L0.803379678,6.8 C0.361551878,6.8 0.00337967812,6.4418278 0.00337967812,6 C0.00337967812,5.5581722 0.361551878,5.2 0.803379678,5.2 L13.1966203,5.2 Z M13.1966203,0.25 C13.6384481,0.25 13.9966203,0.6081722 13.9966203,1.05 C13.9966203,1.4918278 13.6384481,1.85 13.1966203,1.85 L0.803379678,1.85 C0.361551878,1.85 0.00337967812,1.4918278 0.00337967812,1.05 C0.00337967812,0.6081722 0.361551878,0.25 0.803379678,0.25 L13.1966203,0.25 Z"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/renderer/components/BaseIconContainer.vue b/src/renderer/components/BaseIconContainer.vue
index 676679b819..d4115d9c0c 100644
--- a/src/renderer/components/BaseIconContainer.vue
+++ b/src/renderer/components/BaseIconContainer.vue
@@ -66,7 +66,7 @@ export default {
   margin: auto;
 }
 .sidebar {
-  width: 12px;
+  width: 14px;
   height: 12px;
 }
 .hoverState {
@@ -550,43 +550,12 @@ screen and (min-aspect-ratio: 1/1) and (min-height: 1080px) {
 }
 .backDisabled, .forwardDisabled {
   display: block;
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
 }
 .back, .forward, .pageRefresh {
-  width: 20px;
-  height: 20px;
-  .default {
-    display: block;
-  }
-  .hover {
-    display: none;
-  }
-  .active {
-    display: none;
-  }
-  &:hover {
-    .default {
-      display: none;
-    }
-    .hover {
-      display: block;
-    }
-    .active {
-      display: none;
-    }
-  }
-  &:active {
-    .default {
-      display: none;
-    }
-    .hover {
-      display: none;
-    }
-    .active {
-      display: block;
-    }
-  }
+  width: 16px;
+  height: 16px;
 }
 .showMarks, .hideMarks, .closeSearch {
   width: 18px;
diff --git a/src/renderer/components/BrowsingView/BrowsingControl.vue b/src/renderer/components/BrowsingView/BrowsingControl.vue
index 23b6bbf646..5c027c1e6a 100644
--- a/src/renderer/components/BrowsingView/BrowsingControl.vue
+++ b/src/renderer/components/BrowsingView/BrowsingControl.vue
@@ -1,45 +1,51 @@
 <template>
   <div
     :style="{
-      width: isDarwin ? '113px' : '110px',
+      width: isDarwin ? '114px' : '110px',
     }"
     class="browsing-control"
   >
-    <SidebarIcon
-      @mouseover="mouseoverSidebar = true"
-      @mouseout="mouseoverSidebar = false"
-      :mouseover="mouseoverSidebar"
-      class="sidebar no-drag"
-    />
-    <Icon
-      ref="back"
-      :type="backType"
-      :style="{
-        cursor: webInfo.canGoBack ? 'pointer' : ''
-      }"
-      @mouseup.native="handleUrlBack"
-      class="back-icon"
-    />
-    <Icon
-      ref="forward"
-      :type="forwardType"
-      :style="{
-        cursor: webInfo.canGoForward ? 'pointer' : ''
-      }"
-      @mouseup.native="handleUrlForward"
-      class="forward-icon"
-    />
+    <div
+      @mouseup="handleSidebar"
+      class="control-button sidebar-icon no-drag"
+    >
+      <Icon
+        type="sidebar"
+      />
+    </div>
+    <div
+      @mouseup="handleUrlBack"
+      class="control-button back-icon"
+    >
+      <Icon
+        ref="back"
+        :type="backType"
+        :style="{
+          cursor: webInfo.canGoBack ? 'pointer' : ''
+        }"
+      />
+    </div>
+    <div
+      @mouseup="handleUrlForward"
+      class="control-button forward-icon"
+    >
+      <Icon
+        ref="forward"
+        :type="forwardType"
+        :style="{
+          cursor: webInfo.canGoForward ? 'pointer' : ''
+        }"
+      />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import Icon from '@/components/BaseIconContainer.vue';
-import SidebarIcon from '@/components/LandingView/SidebarIcon.vue';
 
 export default {
   name: 'BrowsingControl',
   components: {
-    SidebarIcon,
     Icon,
   },
   props: {
@@ -74,6 +80,9 @@ export default {
     },
   },
   methods: {
+    handleSidebar() {
+      this.$event.emit('side-bar-mouseup');
+    },
   },
 };
 </script>
@@ -85,24 +94,27 @@ export default {
   align-items: center;
   z-index: 6;
   border-right: 1px solid #F2F1F4;
-  .sidebar {
+  .control-button {
+    width: 30px;
+    height: 30px;
+    border-radius: 100%;
     display: flex;
-    justify-content: flex-end;
-    margin-left: 15px;
-    transition: width 100ms linear;
+    justify-content: center;
+    align-items: center;
+    transition: background-color 100ms ease-in;
+    &:hover {
+      background-color: #F5F6F8;
+    }
+  }
+  .sidebar-icon {
+    margin-left: 8px;
   }
   .back-icon {
-    width: 16px;
-    height: 16px;
-    margin-left: 21px;
-    margin-right: 18px;
-    -webkit-app-region: no-drag;
+    margin-left: 4px;
+    margin-right: 4px;
   }
   .forward-icon {
-    width: 16px;
-    height: 16px;
-    margin-right: 17px;
-    -webkit-app-region: no-drag;
+    margin-right: 8px;
   }
 }
 </style>

From 0813641c35b859589d48d253ae55b635e1cae7f5 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Wed, 4 Sep 2019 17:16:01 +0800
Subject: [PATCH 051/123] feat(browsing): refresh

---
 src/renderer/components/BrowsingView/BrowsingControl.vue | 4 ----
 src/renderer/components/BrowsingView/BrowsingHeader.vue  | 2 +-
 src/renderer/components/BrowsingView/BrowsingInput.vue   | 4 ++++
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/BrowsingView/BrowsingControl.vue b/src/renderer/components/BrowsingView/BrowsingControl.vue
index 5c027c1e6a..8dd82edc1c 100644
--- a/src/renderer/components/BrowsingView/BrowsingControl.vue
+++ b/src/renderer/components/BrowsingView/BrowsingControl.vue
@@ -49,10 +49,6 @@ export default {
     Icon,
   },
   props: {
-    handleUrlReload: {
-      type: Function,
-      required: true,
-    },
     handleUrlBack: {
       type: Function,
       required: true,
diff --git a/src/renderer/components/BrowsingView/BrowsingHeader.vue b/src/renderer/components/BrowsingView/BrowsingHeader.vue
index 24d89e1f49..61e7872299 100644
--- a/src/renderer/components/BrowsingView/BrowsingHeader.vue
+++ b/src/renderer/components/BrowsingView/BrowsingHeader.vue
@@ -3,7 +3,6 @@
     class="header"
   >
     <browsing-control
-      :handle-url-reload="handleUrlReload"
       :handle-url-back="handleUrlBack"
       :handle-url-forward="handleUrlForward"
       :back-type="backType"
@@ -11,6 +10,7 @@
       :web-info="webInfo"
     />
     <browsing-input
+      :handle-url-reload="handleUrlReload"
       :close-url-input="closeUrlInput"
       :play-file-with-playing-view="playFileWithPlayingView"
     />
diff --git a/src/renderer/components/BrowsingView/BrowsingInput.vue b/src/renderer/components/BrowsingView/BrowsingInput.vue
index 322617f847..2c92f5f82c 100644
--- a/src/renderer/components/BrowsingView/BrowsingInput.vue
+++ b/src/renderer/components/BrowsingView/BrowsingInput.vue
@@ -27,6 +27,10 @@ export default {
     Icon,
   },
   props: {
+    handleUrlReload: {
+      type: Function,
+      required: true,
+    },
     closeUrlInput: {
       type: Function,
       required: true,

From 07d43b35baa788a50208180cc2b5723090ab321a Mon Sep 17 00:00:00 2001
From: Yan Yifeng <yanyifeng@splayer.org>
Date: Wed, 4 Sep 2019 17:33:49 +0800
Subject: [PATCH 052/123] chore(splayerx): update package.json and typings.d.ts

Update ass-compiler and @chiflix/electron. Add typings for new subtitle interface.
---
 package.json              |  4 ++--
 src/renderer/typings.d.ts | 24 +++++++++++++++++-------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index dc7b31aa02..7661f4409c 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "@types/fs-extra": "^7.0.0",
     "@types/lodash": "^4.14.134",
     "@types/lolex": "^3.1.1",
-    "ass-compiler": "0.0.10",
+    "ass-compiler": "github:YvonTre/ass-compiler",
     "axios": "^0.19.0",
     "chardet": "^0.7.0",
     "configcat-js": "^1.1.19",
@@ -112,7 +112,7 @@
     "@babel/plugin-syntax-import-meta": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/register": "^7.0.0",
-    "@chiflix/electron": "5.0.10",
+    "@chiflix/electron": "5.0.7-dev.1",
     "@sentry/webpack-plugin": "^1.6.2",
     "@types/chai": "^4.1.7",
     "@types/mkdirp": "^0.5.2",
diff --git a/src/renderer/typings.d.ts b/src/renderer/typings.d.ts
index 9fb12973ac..3fc082e174 100644
--- a/src/renderer/typings.d.ts
+++ b/src/renderer/typings.d.ts
@@ -95,19 +95,29 @@ declare module 'electron' {
         err: string,
       ) => void,
     ): void;
-    /** extract one subtitle from a video file given stream index and format */
+    /** extract subtitle fragment from a video file (@cliflix/electron@4.0.7-dev.1) */
     extractSubtitles(
       /** source video path to extract subtitle from */
       srcVideoPath: string,
-      /** subtitle path to save */
-      subtitlePath: string,
-      /** stream index string in the form of 0:s:0 */
-      streamIndex?: string,
+      /** subtitle stream index to extract, if -1 will auto select the default track */
+      streamIndex: number,
+      /** position of the last subtitle extracted or seconds of the video */
+      posOrSeconds: number,
+      /** whether posOrSeconds param is seconds of the video */
+      isSeconds: boolean,
+      /** subtitle dialogues count */
+      dialogueCount: number,
       callback: (
-        /** if not '0', an error occurred */
-        err: string,
+        /** if not '', an error occurred */
+        error: string,
+        /** video position of the last extracted dialogue */
+        position: number,
+        /** buffer of the extracted dialogues */
+        data: Buffer | null,
       ) => void,
     ): void;
+    /** stop the subtitle extraction */
+    stopExtractSubtitles(): void;
     /** generate thumbnails in the order of left-to-right and top-to-bottom */
     generateThumbnails(
       /** source video path to extract thumbnails from */

From 80f80711f7c619008533d70da3b388690b1ff30b Mon Sep 17 00:00:00 2001
From: Yan Yifeng <yanyifeng@splayer.org>
Date: Wed, 4 Sep 2019 17:38:43 +0800
Subject: [PATCH 053/123] refactor(subtitle): subtitle interfaces tweak

Refactor subtitle interfaces into more consistent ones.

1. Remove duplicated properties from Entity.
2. Add ILoader and tweak IParser to adjust to new stream subtitles.
3. Add new ITimeSegments interfaces.
---
 src/renderer/interfaces/ISubtitle.ts | 110 +++++++++++++--------------
 1 file changed, 51 insertions(+), 59 deletions(-)

diff --git a/src/renderer/interfaces/ISubtitle.ts b/src/renderer/interfaces/ISubtitle.ts
index 2419b31b6c..14c791c13c 100644
--- a/src/renderer/interfaces/ISubtitle.ts
+++ b/src/renderer/interfaces/ISubtitle.ts
@@ -21,50 +21,66 @@ export interface IOrigin {
   type: Type;
   source: unknown;
 }
-export type Entity = {
-  source: IOrigin;
-  type: Type;
+export interface IEntity {
+  displaySource: IOrigin;
+  realSource: IOrigin;
+  hash: string;
   format: Format;
   language: LanguageCode;
-  payload: unknown;
-  hash: string;
-  metadata: IMetadata;
   delay: number;
 }
-export const defaultEntity: Entity = {
-  source: {
-    type: Type.Local,
-    source: '',
-  },
-  type: Type.Local,
-  format: Format.Unknown,
-  language: LanguageCode.Default,
-  payload: '',
-  hash: '',
-  metadata: {},
-  delay: 0,
-};
-export type SubtitleControlListItem = {
+export interface IEntityGenerator {
+  getDisplaySource(): Promise<IOrigin>;
+  getRealSource(): Promise<IOrigin>;
+  getHash(): Promise<string>
+  getFormat(): Promise<Format>
+  getLanguage(): Promise<LanguageCode>
+  getDelay(): Promise<number>
+  getVideoSegments?: () => Promise<IRawVideoSegment[]>
+  getAutoUploaded?: () => Promise<boolean>
+}
+export interface ISubtitleControlListItem {
   id: string;
   hash: string;
   type: Type;
   language: LanguageCode;
-  source: unknown;
+  source: IOrigin;
   name?: string;
-  delay: number;
-};
-
-export interface IEntityGenerator {
-  /** get real source to fetch subtitle from */
-  getSource(): Promise<IOrigin>
-  /** get fake source for display use */
-  getStoredSource?: () => Promise<IOrigin>
-  getDelay?: () => Promise<number>
-  getType(): Promise<Type>
-  getFormat(): Promise<Format>
-  getLanguage(): Promise<LanguageCode>
-  getPayload(): Promise<unknown>
-  getHash(): Promise<string>
+}
+export interface ILoader {
+  readonly source: IOrigin;
+  readonly canPreload: boolean;
+  readonly canCache: boolean;
+  readonly canUpload: boolean;
+  readonly fullyRead: boolean;
+  getPayload(time?: number): Promise<unknown>;
+  pause(): void | Promise<void>;
+  cache(): Promise<IOrigin>;
+  on(event: 'cache' | 'read' | 'upload', callback: (result: boolean) => void): void;
+  once(event: 'cache' | 'read' | 'upload', callback: (result: boolean) => void): void;
+  destroy(): Promise<void>
+}
+export interface IParser {
+  readonly format: Format;
+  readonly loader: ILoader;
+  readonly videoSegments: IVideoSegments;
+  getMetadata(): Promise<IMetadata>;
+  getDialogues(time?: number): Promise<Cue[]>;
+}
+export interface ITimeSegments {
+  insert(start: number, end: number): void;
+  check(time: number): boolean;
+}
+export interface IVideoSegments extends ITimeSegments {
+  updatePlayed(timeStamp: number, lastTimeStamp?: number): void;
+  playedTime: number;
+  export(): IRawVideoSegment[];
+  restore(videoSegments: IRawVideoSegment[]): void;
+}
+export interface IRawVideoSegment {
+  start: number;
+  end: number;
+  played: boolean;
 }
 
 export interface IMetadata {
@@ -99,30 +115,6 @@ export type Cue = {
   format: string,
   tags: ITags,
 }
-export interface IDialogue {
-  start: number;
-  end: number;
-  text?: string;
-  tags?: ITags;
-  fragments?: {
-    text: string;
-    tags: ITags;
-  }[];
-}
-export interface IVideoSegment {
-  start: number;
-  end: number;
-  played: boolean;
-}
-
-export interface IParser {
-  parse(): void;
-  readonly payload: unknown;
-  getMetadata(): Promise<IMetadata>;
-  getDialogues(time?: number): Promise<Cue[]>;
-  getVideoSegments(duration: number): Promise<IVideoSegment[]>;
-  updateVideoSegments(lastTime: number, currentTime: number): number;
-}
 
 export type Subtitle = {
   id: string

From abd002a5c5cb69cffd14be01cba383f88066b016 Mon Sep 17 00:00:00 2001
From: Yan Yifeng <yanyifeng@splayer.org>
Date: Wed, 4 Sep 2019 17:45:48 +0800
Subject: [PATCH 054/123] feat(lib): implement time segments and add tests

Implement Stream and Subtitle TimeSegments.
---
 src/renderer/libs/TimeSegments.ts         | 148 +++++++++++++++++
 test/unit/specs/libs/TimeSegments.spec.js | 194 ++++++++++++++++++++++
 2 files changed, 342 insertions(+)
 create mode 100644 src/renderer/libs/TimeSegments.ts
 create mode 100644 test/unit/specs/libs/TimeSegments.spec.js

diff --git a/src/renderer/libs/TimeSegments.ts b/src/renderer/libs/TimeSegments.ts
new file mode 100644
index 0000000000..3dfd0f7f15
--- /dev/null
+++ b/src/renderer/libs/TimeSegments.ts
@@ -0,0 +1,148 @@
+import { ITimeSegments, IVideoSegments } from '@/interfaces/ISubtitle';
+
+export class StreamTimeSegments implements ITimeSegments {
+  private startTimestamps: number[] = [];
+
+  private endTimestamps: number[] = [];
+
+  private isValidNumber(num: number) {
+    return typeof num === 'number' && Number.isFinite(num) && !Number.isNaN(num) && num >= 0;
+  }
+
+  private checkWithIndex(time: number) {
+    const index = this.startTimestamps.findIndex((timestamp, index, arr) => (
+      timestamp <= time && (!arr[index + 1] || arr[index + 1] >= time)
+    ));
+    return {
+      in: index !== -1 && this.endTimestamps[index] >= time,
+      index,
+    };
+  }
+
+  public check(time: number) { return this.checkWithIndex(time).in; }
+
+  public insert(start: number, end: number) {
+    if (this.isValidNumber(start) && this.isValidNumber(end) && start !== end) {
+      const [startTime, endTime] = [start, end].sort();
+      const { in: startIn, index: startIndex } = this.checkWithIndex(startTime);
+      const { in: endIn, index: endIndex } = this.checkWithIndex(endTime);
+
+      if (!startIn && !endIn && startIndex === endIndex) {
+        this.startTimestamps.splice(startIndex + 1, 0, startTime);
+        this.endTimestamps.splice(endIndex + 1, 0, endTime);
+      } else {
+        if (!startIn) this.startTimestamps[startIndex + 1] = startTime;
+        this.endTimestamps[startIn ? startIndex : endIndex] = endIn
+          ? this.endTimestamps[endIndex] : end;
+
+        const deleteIndex = startIndex === endIndex ? 0 : startIndex + 1;
+        const deleteCount = endIndex - startIndex - (startIn ? 0 : 1);
+        this.startTimestamps.splice(deleteIndex, deleteCount);
+        this.endTimestamps.splice(deleteIndex, deleteCount);
+      }
+    }
+  }
+
+  public bulkInsert(segments: [number, number][], time: number) {
+    const allTimeStamps = segments.flatMap(nums => nums)
+      .concat([time])
+      .filter(num => this.isValidNumber(num));
+    this.insert(Math.min(...allTimeStamps), Math.max(...allTimeStamps));
+  }
+}
+
+export class VideoTimeSegments implements IVideoSegments {
+  private duration: number = 0;
+
+  private timestamps: number[] = [];
+
+  private played: boolean[] = [];
+
+  public constructor(duration: number) {
+    if (!this.isValidNumber(duration)) throw new Error('Duration should be a valid number.');
+    this.duration = duration;
+    this.timestamps.push(0, this.duration);
+    this.played.push(false);
+  }
+
+  private isValidNumber(num: number) {
+    return typeof num === 'number' && Number.isFinite(num) && !Number.isNaN(num) && num > 0
+      && (!this.duration || (this.duration && num <= this.duration));
+  }
+
+  public insert(start: number, end: number) {
+    if (this.isValidNumber(start) && this.isValidNumber(end)) {
+      start = Math.min(start, end);
+      const result = this.checkWithIndex(start);
+      if (result.in && this.timestamps[result.index] !== start) {
+        this.timestamps.splice(result.index + 1, 0, start);
+        this.played.splice(result.index + 1, 0, false);
+      }
+    }
+  }
+
+  private checkWithIndex(time: number) {
+    const index = this.timestamps.findIndex((timestamp, index, arr) => (
+      timestamp <= time && (!arr[index + 1] || arr[index + 1] > time)
+    ));
+    const lastTimeStamp = this.timestamps[this.timestamps.length - 1];
+    return {
+      in: index !== -1 && lastTimeStamp >= time,
+      index,
+    };
+  }
+
+  public check(time: number) { return this.checkWithIndex(time).in; }
+
+  private lastIndex: number = 0;
+
+  private lastPlayedTime: number = 0;
+
+  public updatePlayed(timeStamp: number, lastTimeStamp: number = 0) {
+    if (this.isValidNumber(timeStamp) && this.isValidNumber(lastTimeStamp)) {
+      [timeStamp, lastTimeStamp] = [
+        Math.max(timeStamp, lastTimeStamp),
+        Math.min(timeStamp, lastTimeStamp),
+      ];
+      const { in: currentIn, index: currentIndex } = this.checkWithIndex(timeStamp);
+      const { in: lastIn, index: lastIndex } = this.checkWithIndex(lastTimeStamp);
+      if (currentIn && lastIn && !this.played[currentIndex]) {
+        let playedTime = timeStamp - lastTimeStamp;
+        if (lastIndex !== currentIndex) playedTime = timeStamp - this.timestamps[currentIndex];
+        if (this.lastIndex !== currentIndex) {
+          this.lastIndex = currentIndex;
+          this.lastPlayedTime = playedTime;
+        } else this.lastPlayedTime += playedTime;
+      }
+      if (this.lastIndex !== -1) {
+        const segmentTime = this.timestamps[this.lastIndex + 1] - this.timestamps[this.lastIndex];
+        if (this.lastPlayedTime / segmentTime >= 0.9) this.played[this.lastIndex] = true;
+      }
+    }
+  }
+
+  public get playedTime() {
+    return this.played
+      .map((played, index) => ({ played, index }))
+      .filter(({ played }) => played)
+      .reduce((playedTime, { index }) => {
+        playedTime += this.timestamps[index + 1] - this.timestamps[index];
+        return playedTime;
+      }, 0);
+  }
+
+  public export() {
+    return this.played
+      .map((played, index) => ({
+        start: this.timestamps[index],
+        end: this.timestamps[index + 1],
+        played,
+      }));
+  }
+
+  public restore(timeSegments: { start: number, end: number, played: boolean }[]) {
+    this.timestamps = timeSegments.map(({ start }) => start);
+    this.timestamps.push(timeSegments[timeSegments.length - 1].end);
+    this.played = timeSegments.map(({ played }) => played);
+  }
+}
diff --git a/test/unit/specs/libs/TimeSegments.spec.js b/test/unit/specs/libs/TimeSegments.spec.js
new file mode 100644
index 0000000000..b456f69db2
--- /dev/null
+++ b/test/unit/specs/libs/TimeSegments.spec.js
@@ -0,0 +1,194 @@
+import { StreamTimeSegments, VideoTimeSegments } from '@/libs/TimeSegments';
+
+describe('StreamTimeSegments', () => {
+  let timeSeg = new StreamTimeSegments();
+  beforeEach(() => {
+    timeSeg = new StreamTimeSegments();
+    timeSeg.startTimestamps = [1, 3, 5];
+    timeSeg.endTimestamps = [2, 4, 6];
+  });
+
+  describe('checkWithIndex', () => {
+    it('should return false and -1 when time is lower than the minimum', () => {
+      const result = timeSeg.checkWithIndex(0.5);
+
+      expect(result).to.deep.equal({ in: false, index: -1 });
+    });
+
+    it('should return true and index when time in range', () => {
+      const result = timeSeg.checkWithIndex(1.5);
+
+      expect(result).to.deep.equal({ in: true, index: 0 });
+    });
+
+    it('should return false and index when time is not in range', () => {
+      const result = timeSeg.checkWithIndex(4.5);
+
+      expect(result).to.deep.equal({ in: false, index: 1 });
+    });
+  });
+
+  describe('insert', () => {
+    it('start in range, end in range, start index and end index are equal', () => {
+      timeSeg.insert(1.25, 1.75);
+
+      expect(timeSeg.startTimestamps).to.deep.equal([1, 3, 5]);
+      expect(timeSeg.endTimestamps).to.deep.equal([2, 4, 6]);
+    });
+    it('start in range, end not in range, start index and end index are equal', () => {
+      timeSeg.insert(1.5, 2.5);
+
+      expect(timeSeg.startTimestamps).to.deep.equal([1, 3, 5]);
+      expect(timeSeg.endTimestamps).to.deep.equal([2.5, 4, 6]);
+    });
+    it('should ignore two same numbers', () => {
+      timeSeg.insert(1, 1);
+
+      expect(timeSeg.startTimestamps).to.deep.equal([1, 3, 5]);
+      expect(timeSeg.endTimestamps).to.deep.equal([2, 4, 6]);
+    });
+  });
+});
+describe('VideoTimeSegments', () => {
+  let timeSeg = new VideoTimeSegments(10);
+  beforeEach(() => {
+    timeSeg = new VideoTimeSegments(10);
+    timeSeg.timestamps = [0, 2, 4, 6, 8, 10];
+    timeSeg.played = [false, false, false, false, false];
+  });
+
+  describe('checkWithIndex', () => {
+    it('should return false and -1 when time is lower than the minimum', () => {
+      const result = timeSeg.checkWithIndex(-1);
+
+      expect(result).to.deep.equal({ in: false, index: -1 });
+    });
+
+    it('should return true and index when time in range', () => {
+      const result = timeSeg.checkWithIndex(4);
+
+      expect(result).to.deep.equal({ in: true, index: 2 });
+    });
+
+    it('should return false and index when time is larger than the maximum', () => {
+      const result = timeSeg.checkWithIndex(11);
+
+      expect(result).to.deep.equal({ in: false, index: 5 });
+    });
+  });
+
+  describe('insert', () => {
+    it('should insert a new entry in timestamps', () => {
+      timeSeg.insert(5, 5.5);
+
+      expect(timeSeg.timestamps).to.deep.equal([0, 2, 4, 5, 6, 8, 10]);
+    });
+    it('should insert the minimum as a new entry', () => {
+      timeSeg.insert(5.5, 5);
+
+      expect(timeSeg.timestamps).to.deep.equal([0, 2, 4, 5, 6, 8, 10]);
+    });
+    it('should not insert an existed entry', () => {
+      timeSeg.insert(4, 7);
+
+      expect(timeSeg.timestamps).to.deep.equal([0, 2, 4, 6, 8, 10]);
+    });
+    it('should also insert a false entry in played', () => {
+      timeSeg.insert(5, 5.5);
+
+      expect(timeSeg.played).to.deep.equal([false, false, false, false, false, false]);
+    });
+    it('should keep previous segment played status when break entries', () => {
+      timeSeg.played = [false, false, true, false, false];
+      timeSeg.insert(5, 5.5);
+
+      expect(timeSeg.played).to.deep.equal([false, false, true, false, false, false]);
+    });
+  });
+
+  describe('updatePlayed', () => {
+    describe('update last index and last played time', () => {
+      describe('when current and last timestamp are in the same time segment', () => {
+        it('should update last index to the segment index', () => {
+          timeSeg.updatePlayed(5, 4);
+
+          expect(timeSeg.lastIndex).to.equal(2);
+        });
+        it('should update last played time += the contraction of two timestamps', () => {
+          timeSeg.updatePlayed(5, 4);
+
+          expect(timeSeg.lastPlayedTime).to.equal(1);
+        });
+      });
+      describe('when current and last timestamp are not in the same time segment', () => {
+        it('should update last index to the timestamp segment index', () => {
+          timeSeg.updatePlayed(7.5, 4);
+
+          expect(timeSeg.lastIndex).to.equal(3);
+        });
+        it('should update last played += the contraction of the timestamp and the segment start', () => {
+          timeSeg.updatePlayed(7.5, 4);
+
+          expect(timeSeg.lastPlayedTime).to.equal(1.5);
+        });
+      });
+    });
+
+    it('should not update played when time played not reaching 90% of the segment time', () => {
+      timeSeg.updatePlayed(5, 4);
+
+      expect(timeSeg.played).to.deep.equal([false, false, false, false, false]);
+    });
+
+    it('should update played to true when time played reaching 90% of the segment time', () => {
+      timeSeg.updatePlayed(5.9, 4);
+
+      expect(timeSeg.played).to.deep.equal([false, false, true, false, false]);
+    });
+  });
+
+  it('should played time return proper played time', () => {
+    timeSeg.played = [true, false, true, false, true];
+
+    expect(timeSeg.playedTime).to.deep.equal(6);
+  });
+
+  it('should export return raw time segments', () => {
+    timeSeg.played[2] = true;
+    const result = timeSeg.export();
+    const expectedResult = [
+      { start: 0, end: 2, played: false },
+      { start: 2, end: 4, played: false },
+      { start: 4, end: 6, played: true },
+      { start: 6, end: 8, played: false },
+      { start: 8, end: 10, played: false },
+    ];
+
+    expect(result).to.deep.equal(expectedResult);
+  });
+
+  describe('restore', () => {
+    const rawTimeSegments = [
+      { start: 0, end: 2, played: false },
+      { start: 2, end: 4, played: false },
+      { start: 4, end: 6, played: true },
+      { start: 6, end: 8, played: false },
+      { start: 8, end: 10, played: true },
+      { start: 10, end: 12, played: true },
+    ];
+    it('should update time segments', () => {
+      timeSeg = new VideoTimeSegments(12);
+      timeSeg.restore(rawTimeSegments);
+      const expectedResult = [0, 2, 4, 6, 8, 10, 12];
+
+      expect(timeSeg.timestamps).to.deep.equal(expectedResult);
+    });
+    it('should update played', () => {
+      timeSeg = new VideoTimeSegments(12);
+      timeSeg.restore(rawTimeSegments);
+      const expectedResult = [false, false, true, false, true, true];
+
+      expect(timeSeg.played).to.deep.equal(expectedResult);
+    });
+  });
+});

From 41a49978ec78b13d306f40d5848a774f5df10970 Mon Sep 17 00:00:00 2001
From: Yan Yifeng <yanyifeng@splayer.org>
Date: Wed, 4 Sep 2019 17:51:33 +0800
Subject: [PATCH 055/123] feat(mediatask): implement task cancel ability

1. Cancel task using taskQueue.cancelTask(id).
2. MediaTask can provide a cancel method to cancel gracefully.
3. Task will be cancelled right away, regardless of its original piority
---
 .../plugins/mediaTasks/baseMediaTaskQueue.ts  | 59 ++++++++++++++++---
 1 file changed, 52 insertions(+), 7 deletions(-)

diff --git a/src/renderer/plugins/mediaTasks/baseMediaTaskQueue.ts b/src/renderer/plugins/mediaTasks/baseMediaTaskQueue.ts
index d2b0bb2201..986b21adaa 100644
--- a/src/renderer/plugins/mediaTasks/baseMediaTaskQueue.ts
+++ b/src/renderer/plugins/mediaTasks/baseMediaTaskQueue.ts
@@ -1,13 +1,16 @@
 import { log } from '@/libs/Log';
 
-export interface IMediaTask<T = unknown> {
+export interface IMediaTask<ResultType, CancelType = void> {
   getId(): string;
-  execute(): Promise<T>;
+  execute(): ResultType | Promise<ResultType>;
+  cancel?: () => (CancelType | Promise<CancelType>);
 }
 type TaskInfo = {
   id: string;
   run: () => Promise<void>;
+  cancel: () => Promise<void>;
   piority: number;
+  needCancel: boolean;
 }
 interface IAddTaskOptions {
   piority?: number;
@@ -54,18 +57,59 @@ export default class BaseMediaTaskQueue {
           this.processTasks();
         }
       };
-      this.enqueue(run, id, piority || 0);
+      const cancel = async (): Promise<void> => {
+        try {
+          const result = task.cancel ? await Promise.race([
+            new Promise((resolve, reject) => setTimeout(
+              () => reject(new Error(`Timeout: ${task.constructor.name}`)),
+              timeout || defaultOptions.timeout,
+            )),
+            task.cancel(),
+          ]) : () => {};
+          resolve(result as T);
+        } catch (error) {
+          reject(error);
+        } finally {
+          this.executing = false;
+          this.processTasks();
+        }
+      };
+      this.enqueue(run, cancel, id, piority || 0);
       if (!this.executing) this.processTasks();
     });
   }
 
-  private enqueue(run: () => Promise<void>, id: string, piority: number) {
+  public cancelTask(id: string) {
+    const taskIndex = this.pendingTasks.findIndex(task => task.id === id);
+    if (taskIndex !== -1) {
+      const task = this.pendingTasks.splice(taskIndex, 1)[0];
+      task.needCancel = true;
+      this.pendingTasks.unshift(task);
+    }
+  }
+
+  private enqueue(
+    run: () => Promise<void>, cancel: () => Promise<void>,
+    id: string, piority: number,
+  ) {
     if (!this.pendingTasks.length
       || this.pendingTasks[this.pendingTasks.length - 1].piority >= piority) {
-      this.pendingTasks.push({ id, run, piority });
+      this.pendingTasks.push({
+        id,
+        run,
+        cancel,
+        piority,
+        needCancel: false,
+      });
     } else {
       const index = this.pendingTasks.findIndex(task => task.piority < piority);
-      this.pendingTasks.splice(index, 0, { id, run, piority });
+      this.pendingTasks.splice(index, 0, {
+        id,
+        run,
+        cancel,
+        piority,
+        needCancel: false,
+      });
     }
   }
 
@@ -75,7 +119,8 @@ export default class BaseMediaTaskQueue {
     if (task) {
       this.executing = true;
       try {
-        task.run();
+        if (task.needCancel) task.cancel();
+        else task.run();
       } catch (ex) {
         log.error('BaseMediaTask', ex);
       }

From e424bb45b3a1a7ec470da2b57ae682d8b83f6352 Mon Sep 17 00:00:00 2001
From: Yan Yifeng <yanyifeng@splayer.org>
Date: Wed, 4 Sep 2019 18:01:34 +0800
Subject: [PATCH 056/123] refactor(mediatask): refactor subtitle tasks

Seperate subtitle tasks to four different tasks for streaming support.

1. Add subtitle-metadata, -cache, -stream and -destroy tasks.
2. Seperate subtitle queue from snapshot queue.
3. Rename subtitle tasks in mediaTasks.
---
 src/main/helpers/mediaTasksPlugin.ts          | 119 +++++++++++---
 src/renderer/plugins/mediaTasks/index.ts      |  43 ++++-
 .../mediaTasks/snapshotSubtitleQueue.ts       |  64 +-------
 .../plugins/mediaTasks/subtitleQueue.ts       | 152 ++++++++++++++++++
 src/renderer/typings.d.ts                     |  45 ++++--
 5 files changed, 326 insertions(+), 97 deletions(-)
 create mode 100644 src/renderer/plugins/mediaTasks/subtitleQueue.ts

diff --git a/src/main/helpers/mediaTasksPlugin.ts b/src/main/helpers/mediaTasksPlugin.ts
index aa0c703f4e..acf4ec2ed3 100644
--- a/src/main/helpers/mediaTasksPlugin.ts
+++ b/src/main/helpers/mediaTasksPlugin.ts
@@ -61,25 +61,108 @@ export default function registerMediaTasks() {
       reply(event, 'snapshot-reply', 'File does not exist.');
     }
   });
-  ipcMain.on('subtitle-request', (event, videoPath, subtitlePath, streamIndex) => {
-    if (existsSync(subtitlePath)) {
-      reply(event, 'subtitle-reply', null, subtitlePath);
-    } else if (existsSync(videoPath)) {
-      splayerxProxy.extractSubtitles(
-        videoPath, subtitlePath,
-        streamIndex,
-        (err) => {
-          if (err === '0' && existsSync(subtitlePath)) {
-            reply(event, 'subtitle-reply', null, subtitlePath);
-          } else {
-            if (typeof err !== 'string') err = `${err}, type: ${typeof err}`;
-            reply(event, 'subtitle-reply', `subtitle-reply: ${err}`);
-          }
-        },
-      );
-    } else {
-      reply(event, 'subtitle-reply', 'File does not exist.');
+  let lastVideoPath = '';
+  let lastStreamIndex = -1;
+  const videoSubtitlesMap: Map<string, Map<number, {
+    path: string;
+    metadata: string;
+    payload: string;
+    position: number;
+    finished: boolean;
+    lastLines: string[];
+  }>> = new Map();
+  ipcMain.on('subtitle-metadata-request', async (event: Event, videoPath: string, streamIndex: number, subtitlePath: string) => {
+    if ((lastVideoPath || lastStreamIndex !== -1)
+      && (lastVideoPath !== videoPath || lastStreamIndex !== streamIndex)) {
+      await splayerxProxy.stopExtractSubtitles();
+    }
+    lastVideoPath = videoPath;
+    lastStreamIndex = streamIndex;
+    if (!videoSubtitlesMap.has(videoPath)) videoSubtitlesMap.set(videoPath, new Map());
+    const streamSubtitlesMap = videoSubtitlesMap.get(videoPath);
+    if (streamSubtitlesMap) {
+      const subtitle = streamSubtitlesMap.get(streamIndex) || {
+        path: subtitlePath,
+        metadata: '',
+        payload: '',
+        position: 0,
+        finished: false,
+        lastLines: [],
+      };
+      if (existsSync(subtitlePath) || subtitle.finished) {
+        subtitle.finished = true;
+        reply(event, 'subtitle-metadata-reply', undefined, subtitle.finished);
+      } else if (!subtitle.metadata) {
+        splayerxProxy.extractSubtitles(videoPath, streamIndex, 0, false, 1,
+          (error, pos, data) => {
+            if (error || !data) reply(event, 'subtitle-metadata-reply', new Error(error));
+            else {
+              subtitle.position = pos;
+              subtitle.payload = subtitle.metadata = data.toString('utf8')
+                .replace(/\n(Dialogue|Comment)[\s\S]*/g, '')
+                .split(/\r?\n/)
+                .join('\n');
+            }
+            reply(event, 'subtitle-metadata-reply', undefined, subtitle.finished, subtitle.metadata);
+          });
+      } else reply(event, 'subtitle-metadata-reply', undefined, subtitle.finished, subtitle.metadata);
+      streamSubtitlesMap.set(streamIndex, subtitle);
+    }
+  });
+  ipcMain.on('subtitle-cache-request', async (event: Event, videoPath: string, streamIndex: number) => {
+    if ((lastVideoPath || lastStreamIndex !== -1)
+      && (lastVideoPath !== videoPath || lastStreamIndex !== streamIndex)) {
+      await splayerxProxy.stopExtractSubtitles();
+    }
+    lastVideoPath = videoPath;
+    lastStreamIndex = streamIndex;
+    const streamSubtitlesMap = videoSubtitlesMap.get(videoPath);
+    if (streamSubtitlesMap) {
+      const subtitle = streamSubtitlesMap.get(streamIndex);
+      if (subtitle) {
+        splayerxProxy.extractSubtitles(videoPath, streamIndex, subtitle.position, false, 20,
+          (error, pos, data) => {
+            if (pos) subtitle.position = pos;
+            if (data) {
+              const newLines = data.toString('utf8').split(/\r?\n/);
+              const finalPayload = newLines.filter(line => !subtitle.lastLines.includes(line)).join('\n');
+              subtitle.lastLines = newLines;
+              subtitle.payload += `\n${finalPayload}`;
+            }
+            if (error === 'EOF') {
+              subtitle.finished = true;
+              reply(event, 'subtitle-cache-reply', undefined, subtitle.finished, subtitle.payload);
+            } else if (error) reply(event, 'subtitle-cache-reply', new Error(error));
+            else reply(event, 'subtitle-cache-reply', undefined, subtitle.finished);
+          });
+        streamSubtitlesMap.set(streamIndex, subtitle);
+      } else reply(event, 'subtitle-cache-reply', new Error('Missing subtitle entry, should request metadata first.'));
+    } else reply(event, 'subtitle-cache-reply', new Error('Missing videoPath entry, should request metadata first.'));
+  });
+  ipcMain.on('subtitle-stream-request', (event: Event, videoPath: string, streamIndex: number, time: number) => {
+    const streamSubtitlesMap = videoSubtitlesMap.get(videoPath);
+    if (streamSubtitlesMap) {
+      const subtitle = streamSubtitlesMap.get(streamIndex);
+      if (subtitle) {
+        splayerxProxy.extractSubtitles(videoPath, streamIndex, time, true, 20,
+          (error, pos, data) => {
+            if (data) reply(event, 'subtitle-stream-reply', undefined, data.toString('utf8'));
+            else reply(event, 'subtitle-stream-reply', new Error(!error || !data ? 'Missing data' : error));
+          });
+      } else reply(event, 'subtitle-stream-reply', new Error('Missing subtitle entry, should request metadata first.'));
+    } else reply(event, 'subtitle-stream-reply', new Error('Missing videoPath entry, should request metadata first.'));
+  });
+  ipcMain.on('subtitle-destroy-request', async (event: Event, videoPath: string, streamIndex: number) => {
+    const streamSubtitlesMap = videoSubtitlesMap.get(videoPath);
+    if (streamSubtitlesMap) {
+      const subtitle = streamSubtitlesMap.get(streamIndex);
+      if (subtitle) {
+        await splayerxProxy.stopExtractSubtitles();
+        lastVideoPath = '';
+        lastStreamIndex = -1;
+      }
     }
+    reply(event, 'subtitle-destroy-reply');
   });
   ipcMain.on('thumbnail-request', (event,
     videoPath, imagePath, interval,
diff --git a/src/renderer/plugins/mediaTasks/index.ts b/src/renderer/plugins/mediaTasks/index.ts
index 7c192e53e6..60835fd531 100644
--- a/src/renderer/plugins/mediaTasks/index.ts
+++ b/src/renderer/plugins/mediaTasks/index.ts
@@ -1,11 +1,12 @@
 import MediaInfoQueue, { CodecType, ISubtitleStream } from './mediaInfoQueue';
-import SnapshotSubtitleQueue from './snapshotSubtitleQueue';
+import SnapshotQueue from './snapshotSubtitleQueue';
+import SubtitleQueue from './subtitleQueue';
 import ThumbnailQueue from './thumbnailQueue';
-import { Format } from '@/interfaces/ISubtitle';
 import { log } from '@/libs/Log';
 
 const mediaInfoQueue = new MediaInfoQueue();
-const snapshotSubtitleQueue = new SnapshotSubtitleQueue();
+const snapshotQueue = new SnapshotQueue();
+const subtitleQueue = new SubtitleQueue();
 const thumbnailQueue = new ThumbnailQueue();
 
 export async function getMediaInfo(path: string) {
@@ -36,7 +37,7 @@ export async function getSnapshotPath(
   width: number = 1920, height: number = 1080,
 ) {
   try {
-    return snapshotSubtitleQueue.getSnapshotPath(
+    return snapshotQueue.getSnapshotPath(
       videoPath,
       timeInSeconds,
       width, height,
@@ -46,14 +47,42 @@ export async function getSnapshotPath(
     return '';
   }
 }
-export async function getSubtitlePath(videoPath: string, streamIndex: number, format: Format) {
+
+export async function getSubtitleMetadata(videoPath: string, streamIndex: number) {
   try {
-    return snapshotSubtitleQueue.getSubtitlePath(videoPath, streamIndex, format);
+    return subtitleQueue.getSubtitleMetadata(videoPath, streamIndex);
   } catch (error) {
-    log.error('[MediaTask|Subtitle]', error);
+    log.error('[MediaTask|SubtitleMetadata]', error);
     return '';
   }
 }
+export async function cacheSubtitle(videoPath: string, streamIndex: number) {
+  try {
+    return subtitleQueue.cacheSubtitle(videoPath, streamIndex);
+  } catch (error) {
+    log.error('[MediaTask|SubtitleCache]', error);
+    return '';
+  }
+}
+export async function getSubtitleFragment(
+  videoPath: string,
+  streamIndex: number,
+  videoTime: number,
+) {
+  try {
+    return subtitleQueue.getSubtitleFragment(videoPath, streamIndex, videoTime);
+  } catch (error) {
+    log.error('[MediaTask|SubtitleFragment]', error);
+    return '';
+  }
+}
+export async function finishSubtitleExtraction(videoPath: string, streamIndex: number) {
+  try {
+    subtitleQueue.stopSubtitleExtraction(videoPath, streamIndex);
+  } catch (error) {
+    log.error('[MediaTask|SubtitleFragment]', error);
+  }
+}
 
 /**
  * 获取进度条缩略图路径
diff --git a/src/renderer/plugins/mediaTasks/snapshotSubtitleQueue.ts b/src/renderer/plugins/mediaTasks/snapshotSubtitleQueue.ts
index 52f9b3edd5..c46d95881a 100644
--- a/src/renderer/plugins/mediaTasks/snapshotSubtitleQueue.ts
+++ b/src/renderer/plugins/mediaTasks/snapshotSubtitleQueue.ts
@@ -1,13 +1,7 @@
-// @ts-ignore
 import { ipcRenderer } from 'electron';
 import { join } from 'path';
 import BaseMediaTaskQueue, { IMediaTask } from './baseMediaTaskQueue';
-import {
-  timecodeFromSeconds, mediaQuickHash,
-  getVideoDir, getSubtitleDir,
-} from '@/libs/utils';
-import { Format } from '@/interfaces/ISubtitle';
-import { formatToExtension } from '@/services/subtitle/utils';
+import { timecodeFromSeconds, mediaQuickHash, getVideoDir } from '@/libs/utils';
 
 class SnapshotTask implements IMediaTask<string> {
   private readonly videoPath: string;
@@ -67,55 +61,7 @@ class SnapshotTask implements IMediaTask<string> {
     });
   }
 }
-
-class SubtitleTask implements IMediaTask<string> {
-  private readonly videoPath: string;
-
-  private readonly videoHash: string;
-
-  private readonly subtitlePath: string;
-
-  private readonly streamIndex: number;
-
-  public constructor(
-    videoPath: string, videoHash: string, subtitlePath: string,
-    streamIndex: number,
-  ) {
-    this.videoPath = videoPath;
-    this.videoHash = videoHash;
-    this.subtitlePath = subtitlePath;
-    this.streamIndex = streamIndex;
-  }
-
-  public static async from(videoPath: string, streamIndex: number, format: Format) {
-    const videoHash = await mediaQuickHash.try(videoPath);
-    if (videoHash) {
-      const dirPath = await getSubtitleDir();
-      const subtitlePath = join(dirPath, `${[videoHash, streamIndex].join('-')}.${formatToExtension(format)}`);
-      return new SubtitleTask(
-        videoPath, videoHash, subtitlePath,
-        streamIndex,
-      );
-    }
-    return undefined;
-  }
-
-  public getId() { return `${[this.videoHash, this.streamIndex]}`; }
-
-  public execute(): Promise<string> {
-    return new Promise((resolve, reject) => {
-      ipcRenderer.send('subtitle-request',
-        this.videoPath, this.subtitlePath,
-        `0:${this.streamIndex}:0`);
-      ipcRenderer.once('subtitle-reply', (event: Event, error: string | null, path: string) => {
-        if (error) reject(new Error(error));
-        else resolve(path);
-      });
-    });
-  }
-}
-
-export default class SnapshotSubtitleQueue extends BaseMediaTaskQueue {
+export default class SnapshotQueue extends BaseMediaTaskQueue {
   /** get snapshot path, generate it if not exist */
   public async getSnapshotPath(
     videoPath: string,
@@ -129,10 +75,4 @@ export default class SnapshotSubtitleQueue extends BaseMediaTaskQueue {
     );
     return task ? super.addTask<string>(task) : '';
   }
-
-  /** get a embedded subtitle path, extract it if not exist */
-  public async getSubtitlePath(videoPath: string, streamIndex: number, format: Format) {
-    const task = await SubtitleTask.from(videoPath, streamIndex, format);
-    return task ? super.addTask<string>(task) : '';
-  }
 }
diff --git a/src/renderer/plugins/mediaTasks/subtitleQueue.ts b/src/renderer/plugins/mediaTasks/subtitleQueue.ts
new file mode 100644
index 0000000000..bfbd5e5561
--- /dev/null
+++ b/src/renderer/plugins/mediaTasks/subtitleQueue.ts
@@ -0,0 +1,152 @@
+import { join } from 'path';
+import { ipcRenderer } from 'electron';
+import BaseMediaTaskQueue, { IMediaTask } from './baseMediaTaskQueue';
+import { mediaQuickHash, getSubtitleDir } from '@/libs/utils';
+import { Format } from '@/interfaces/ISubtitle';
+
+
+class SubtitleMetadataTask implements IMediaTask<string> {
+  private videoPath: string;
+
+  private streamIndex: number;
+
+  private subtitlePath: string;
+
+  public constructor(
+    videoPath: string,
+    streamIndex: number, subtitlePath: string,
+  ) {
+    this.videoPath = videoPath;
+    this.streamIndex = streamIndex;
+    this.subtitlePath = subtitlePath;
+  }
+
+  public static async from(videoPath: string, streamIndex: number) {
+    const hash = await mediaQuickHash(videoPath);
+    const subtitlePath = join(await getSubtitleDir(), `${hash}-${streamIndex}.${Format.AdvancedSubStationAplha}`);
+    return new SubtitleMetadataTask(videoPath, streamIndex, subtitlePath);
+  }
+
+  public getId() { return `${['metadata', this.videoPath, this.streamIndex].join('-')}`; }
+
+  public execute(): Promise<string> {
+    return new Promise((resolve, reject) => {
+      ipcRenderer.send('subtitle-metadata-request', this.videoPath, this.streamIndex, this.subtitlePath);
+      ipcRenderer.once('subtitle-metadata-reply', (event, error, finished, metadata) => {
+        if (error) reject(error);
+        else if (finished) reject(new Error('Extraction finished.'));
+        else resolve(metadata);
+      });
+    });
+  }
+}
+
+class SubtitleCacheTask implements IMediaTask<string | undefined> {
+  private readonly videoPath: string;
+
+  private readonly streamIndex: number;
+
+  public constructor(videoPath: string, streamIndex: number) {
+    this.videoPath = videoPath;
+    this.streamIndex = streamIndex;
+  }
+
+  public getId() {
+    return `${['cache', this.videoPath, this.streamIndex].join('-')}`;
+  }
+
+  public execute(): Promise<string | undefined> {
+    return new Promise((resolve, reject) => {
+      ipcRenderer.send('subtitle-cache-request', this.videoPath, this.streamIndex);
+      ipcRenderer.once('subtitle-cache-reply', (event, error, finished, payload) => {
+        if (error) reject(error);
+        else if (!finished) resolve();
+        else resolve(payload);
+      });
+    });
+  }
+}
+
+class SubtitleFragmentTask implements IMediaTask<string> {
+  private readonly videoPath: string;
+
+  private readonly streamIndex: number;
+
+  private readonly videoTime: number;
+
+
+  public constructor(videoPath: string, streamIndex: number, videoTime: number) {
+    this.videoPath = videoPath;
+    this.streamIndex = streamIndex;
+    this.videoTime = videoTime;
+  }
+
+  public getId() {
+    return `${[
+      'fragment',
+      this.videoPath,
+      this.streamIndex,
+    ].join('-')}`;
+  }
+
+  public execute(): Promise<string> {
+    return new Promise((resolve, reject) => {
+      ipcRenderer.send('subtitle-stream-request', this.videoPath, this.streamIndex, this.videoTime);
+      ipcRenderer.once('subtitle-stream-reply', (event, error, data) => {
+        if (error) reject(error);
+        else resolve(data);
+      });
+    });
+  }
+}
+
+class SubtitleDestroyTask implements IMediaTask<void> {
+  private readonly videoPath: string;
+
+  private readonly streamIndex: number;
+
+  public constructor(videoPath: string, streamIndex: number) {
+    this.videoPath = videoPath;
+    this.streamIndex = streamIndex;
+  }
+
+  public getId() {
+    return `${['finished', this.videoPath, this.streamIndex].join('-')}`;
+  }
+
+  public execute(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      ipcRenderer.send('subtitle-destroy-request', this.videoPath, this.streamIndex);
+      ipcRenderer.once('subtitle-destroy-reply', (event, error) => {
+        if (error) reject(error);
+        else resolve();
+      });
+    });
+  }
+}
+
+export default class SubtitleQueue extends BaseMediaTaskQueue {
+  public getSubtitleMetadata(videoPath: string, streamIndex: number) {
+    return SubtitleMetadataTask.from(videoPath, streamIndex)
+      .then(task => super.addTask(task, { piority: 3 }));
+  }
+
+  public cacheSubtitle(videoPath: string, streamIndex: number) {
+    return super.addTask(new SubtitleCacheTask(videoPath, streamIndex), { piority: 1 });
+  }
+
+  public getSubtitleFragment(videoPath: string, streamIndex: number, videoTime: number) {
+    return super.addTask(
+      new SubtitleFragmentTask(videoPath, streamIndex, videoTime),
+      { piority: 2 },
+    );
+  }
+
+  public stopSubtitleExtraction(videoPath: string, streamIndex: number) {
+    const task = new SubtitleDestroyTask(videoPath, streamIndex);
+    this.pendingTasks
+      .filter(({ id }) => new RegExp(`${videoPath}-${streamIndex}`).test(id))
+      .forEach(({ id }) => this.cancelTask(id));
+    return super.addTask(task, { piority: 4 });
+  }
+}
diff --git a/src/renderer/typings.d.ts b/src/renderer/typings.d.ts
index 3fc082e174..f6e5a4be2f 100644
--- a/src/renderer/typings.d.ts
+++ b/src/renderer/typings.d.ts
@@ -180,9 +180,17 @@ declare module 'electron' {
       timeString: string,
       width: number, height: number,
     ) => void): this;
-    on(channel: 'subtitle-request', listener: (event: Event,
-      videoPath: string, subtitlePath: string,
-      streamIndex: string,
+    on(channel: 'subtitle-metadata-request', listener: (event: Event,
+      videoPath: string, streamIndex: number, subtitlePath: string,
+    ) => void): this;
+    on(channel: 'subtitle-cache-request', listener: (event: Event,
+      videoPath: string, streamIndex: number
+    ) => void): this;
+    on(channel: 'subtitle-stream-request', listener: (event: Event,
+      videoPath: string, streamIndex: number, time: number,
+    ) => void): this;
+    on(channel: 'subtitle-destroy-request', listener: (event: Event,
+      videoPath: string, streamIndex: number,
     ) => void): this;
     on(channel: 'thumbnail-request', listener: (event: Event,
       videoPath: string, imagePath: string,
@@ -198,10 +206,18 @@ declare module 'electron' {
       timeString: string,
       width: number, height: number,
     ): void;
-    send(channel: 'subtitle-request',
-      videoPath: string, subtitlePath: string,
-      streamIndex: string,
-    ): void;
+    send(channel: 'subtitle-metadata-request',
+      videoPath: string, streamIndex: number, subtitlePath: string,
+    ): this;
+    send(channel: 'subtitle-cache-request',
+      videoPath: string, streamIndex: number
+    ): this;
+    send(channel: 'subtitle-stream-request',
+      videoPath: string, streamIndex: number, time: number,
+    ): this;
+    send(channel: 'subtitle-destroy-request',
+      videoPath: string, streamIndex: number
+    ): this;
     send(channel: 'thumbnail-request',
       videoPath: string, imagePath: string,
       thumbnailWidth: number,
@@ -210,12 +226,18 @@ declare module 'electron' {
 
     on(channel: 'media-info-reply', listener: (event: Event, error?: Error, info: string) => void): this;
     on(channel: 'snapshot-reply', listener: (event: Event, error?: Error, path: string) => void): this;
-    on(channel: 'subtitle-reply', listener: (event: Event, error: Error | undefined, path: string) => void): this;
+    on(channel: 'subtitle-metadata-reply', listener: (event: Event, error?: Error, finished: boolean, matadata?: string) => void): this;
+    on(channel: 'subtitle-cache-reply', listener: (event: Event, error?: Error, finished: boolean, payload?: string) => void): this;
+    on(channel: 'subtitle-stream-reply', listener: (event: Event, error?: Error, dialogue: string) => void): this;
+    on(channel: 'subtitle-destroy-reply', listener: (event: Event, error?: Error) => void): this;
     on(channel: 'thumbnail-reply', listener: (event: Event, error?: Error, path: string) => void): this;
 
     once(channel: 'media-info-reply', listener: (event: Event, error?: Error, info: string) => void): this;
     once(channel: 'snapshot-reply', listener: (event: Event, error?: Error, path: string) => void): this;
-    once(channel: 'subtitle-reply', listener: (event: Event, error: Error | undefined, path: string) => void): this;
+    once(channel: 'subtitle-metadata-reply', listener: (event: Event, error?: Error, finished: boolean, matadata?: string) => void): this;
+    once(channel: 'subtitle-cache-reply', listener: (event: Event, error?: Error, finished: boolean, payload?: string) => void): this;
+    once(channel: 'subtitle-stream-reply', listener: (event: Event, error?: Error, dialogue: string) => void): this;
+    once(channel: 'subtitle-destroy-reply', listener: (event: Event, error?: Error) => void): this;
     once(channel: 'thumbnail-reply', listener: (event: Event, error?: Error, path: string) => void): this;
   }
 
@@ -223,7 +245,10 @@ declare module 'electron' {
     reply(channel: string, ...args: any[]): void;
     reply(channel: 'media-info-reply', error?: Error, info: string): void;
     reply(channel: 'snapshot-reply', error?: Error, path: string): this;
-    reply(channel: 'subtitle-reply', error: Error | undefined, path: string): this;
+    reply(channel: 'subtitle-metadata-reply', error?: Error, finished: boolean, matadata: string): this;
+    reply(channel: 'subtitle-cache-reply', error?: Error, finished: boolean): this;
+    reply(channel: 'subtitle-stream-reply', error?: Error, dialogue: string): this;
+    reply(channel: 'subtitle-destroy-reply', error?: Error): this;
     reply(channel: 'thumbnail-reply', error?: Error, path: string): void;
   }
 }

From 9fbc942ae7626252f22b6cb80daa0606379482c3 Mon Sep 17 00:00:00 2001
From: Yan Yifeng <yanyifeng@splayer.org>
Date: Wed, 4 Sep 2019 18:14:55 +0800
Subject: [PATCH 057/123] feat(subtitle): add subtitle loaders

Add subtitle loaders implementing ILoader.

1. Add SUBTITLE_REAL_DIRNAME to constants.js.
2. Implement ILoader for embedded, local and sagi subtitles.
3. Add getLoader function to subtitle utils and fix sourceToFormat.
---
 src/renderer/constants.js                     |  10 +
 src/renderer/services/subtitle/utils/index.ts |  30 +-
 .../services/subtitle/utils/loaders.ts        | 287 ++++++++++++++++++
 3 files changed, 320 insertions(+), 7 deletions(-)
 create mode 100644 src/renderer/services/subtitle/utils/loaders.ts

diff --git a/src/renderer/constants.js b/src/renderer/constants.js
index 5d4ce13ab1..9dcc844e4d 100644
--- a/src/renderer/constants.js
+++ b/src/renderer/constants.js
@@ -1,3 +1,8 @@
+import electron from 'electron';
+import { join } from 'path';
+
+const app = electron.app || electron.remote.app;
+
 export const DEFAULT_VIDEO_EVENTS = [
   'abort',
   'canplay',
@@ -133,3 +138,8 @@ export const DEFAULT_LOG_DIRNAME = 'logs';
  */
 export const VIDEO_DIRNAME = 'videos'; // 视频缓存目录
 export const SUBTITLE_DIRNAME = 'subtitles'; // 视频缓存目录
+export const SUBTITLE_REAL_DIRNAME = join(
+  app.getPath(ELECTRON_CACHE_DIRNAME),
+  DEFAULT_DIRNAME,
+  SUBTITLE_DIRNAME,
+);
diff --git a/src/renderer/services/subtitle/utils/index.ts b/src/renderer/services/subtitle/utils/index.ts
index 2b41436d52..a7bc8d9acf 100644
--- a/src/renderer/services/subtitle/utils/index.ts
+++ b/src/renderer/services/subtitle/utils/index.ts
@@ -5,7 +5,7 @@ import {
 } from 'fs-extra';
 import { extname } from 'path';
 import {
-  ITags, IOrigin, Type, Format, IParser,
+  ITags, IOrigin, Type, Format, IParser, ILoader,
 } from '@/interfaces/ISubtitle';
 import { LanguageCode } from '@/libs/language';
 
@@ -14,8 +14,11 @@ import {
 } from '@/services/subtitle';
 
 import { assFragmentLanguageLoader, srtFragmentLanguageLoader, vttFragmentLanguageLoader } from './languageLoader';
-import { IEmbeddedOrigin } from '../loaders';
 import { SagiSubtitlePayload } from '../parsers';
+import {
+  IEmbeddedOrigin,
+  EmbeddedTextStreamLoader, LocalTextLoader, SagiLoader,
+} from './loaders';
 
 /**
  * Cue tags getter for SubRip, SubStation Alpha and Online Transcript subtitles.
@@ -133,11 +136,8 @@ export function sourceToFormat(subtitleSource: IOrigin) {
     case Type.Online:
     case Type.Translated:
       return Format.Sagi;
-    case Type.Embedded: {
-      const { extractedSrc } = (subtitleSource as IEmbeddedOrigin).source;
-      if (extractedSrc) return pathToFormat(extractedSrc);
-      return Format.Unknown;
-    }
+    case Type.Embedded:
+      return Format.AdvancedSubStationAplha;
     default:
       return pathToFormat(subtitleSource.source as string);
   }
@@ -171,6 +171,22 @@ export async function inferLanguageFromPath(path: string): Promise<LanguageCode>
   }
 }
 
+export function getLoader(source: IOrigin): ILoader {
+  switch (source.type) {
+    default:
+      throw new Error('Unknown source type.');
+    case Type.Embedded: {
+      const { videoPath, streamIndex } = (source as IEmbeddedOrigin).source;
+      return new EmbeddedTextStreamLoader(videoPath, streamIndex);
+    }
+    case Type.Local:
+      return new LocalTextLoader(source.source as string);
+    case Type.Online:
+    case Type.Translated:
+      return new SagiLoader(source.source as string);
+  }
+}
+
 export function getParser(format: Format, payload: unknown): IParser {
   switch (format) {
     case Format.AdvancedSubStationAplha:
diff --git a/src/renderer/services/subtitle/utils/loaders.ts b/src/renderer/services/subtitle/utils/loaders.ts
new file mode 100644
index 0000000000..e0b74e768a
--- /dev/null
+++ b/src/renderer/services/subtitle/utils/loaders.ts
@@ -0,0 +1,287 @@
+import { dirname, join, extname } from 'path';
+import {
+  ensureDirSync, existsSync, copyFile, outputFile, writeFile,
+} from 'fs-extra';
+import { EventEmitter } from 'events';
+import {
+  ILoader, IOrigin, Type, Format,
+} from '@/interfaces/ISubtitle';
+import { loadLocalFile, formatToExtension } from '.';
+import { SUBTITLE_REAL_DIRNAME } from '@/constants';
+import { mediaQuickHash, getSubtitleDir } from '@/libs/utils';
+import Sagi from '@/libs/sagi';
+import { SagiSubtitlePayload } from '../parsers';
+import { sagiSubtitleToWebVTT } from './transcoders';
+import {
+  getSubtitleMetadata, cacheSubtitle, getSubtitleFragment, finishSubtitleExtraction,
+} from '@/plugins/mediaTasks';
+
+enum Status {
+  NOT_STARTED,
+  WORKING,
+  FINISHED,
+}
+export interface ILocalTextOrigin extends IOrigin {
+  type: Type.Local;
+  source: string;
+}
+export class LocalTextLoader extends EventEmitter implements ILoader {
+  public readonly canPreload = true;
+
+  private _loadingStatus = Status.NOT_STARTED;
+
+  public get fullyRead() { return this._loadingStatus === Status.FINISHED; }
+
+  public get canUpload() { return this._loadingStatus === Status.FINISHED; }
+
+  private _cacheStatus = Status.NOT_STARTED;
+
+  public get canCache() {
+    return this._loadingStatus === Status.FINISHED && this._cacheStatus === Status.NOT_STARTED;
+  }
+
+  public readonly source: ILocalTextOrigin;
+
+  public constructor(path: string) {
+    super();
+    this.source = { type: Type.Local, source: path };
+    if (dirname(path) === SUBTITLE_REAL_DIRNAME) this._cacheStatus = Status.FINISHED;
+  }
+
+  private _payloadString: string = '';
+
+  public async getPayload(): Promise<string> {
+    if (this._loadingStatus === Status.NOT_STARTED) {
+      this._loadingStatus = Status.WORKING;
+      this._payloadString = await loadLocalFile(this.source.source);
+      this._loadingStatus = Status.FINISHED;
+      this.emit('cache', this.canCache);
+      this.emit('upload', this.canUpload);
+      this.emit('read', this.fullyRead);
+    }
+    return this._payloadString;
+  }
+
+  public pause() {}
+
+  public async cache() {
+    if (this.canCache) {
+      const { source } = this.source;
+      const hash = await mediaQuickHash.try(source);
+      if (hash) {
+        this._cacheStatus = Status.WORKING;
+        const storedPath = join(SUBTITLE_REAL_DIRNAME, `${hash}${extname(source)}`);
+        ensureDirSync(SUBTITLE_REAL_DIRNAME);
+        if (!existsSync(storedPath)) await copyFile(source, storedPath);
+        this._cacheStatus = Status.FINISHED;
+        return {
+          type: Type.Local,
+          source: storedPath,
+        };
+      }
+      throw new Error('Invalid hash.');
+    }
+    throw new Error('Cannot cache now.');
+  }
+
+  public async destroy() { this._payloadString = ''; }
+}
+export interface IEmbeddedOrigin extends IOrigin {
+  type: Type.Embedded;
+  source: {
+    videoPath: string;
+    streamIndex: number;
+  };
+}
+export class EmbeddedTextStreamLoader extends EventEmitter implements ILoader {
+  public readonly canPreload = false;
+
+  private _loadingStatus = Status.NOT_STARTED;
+
+  public get fullyRead() { return this._loadingStatus === Status.FINISHED; }
+
+  public get canUpload() { return this._loadingStatus === Status.FINISHED; }
+
+  private _cacheStatus = Status.NOT_STARTED;
+
+  public get canCache() {
+    return this._loadingStatus === Status.FINISHED && this._cacheStatus === Status.NOT_STARTED;
+  }
+
+  public readonly source: IEmbeddedOrigin;
+
+  public constructor(videoPath: string, streamIndex: number) {
+    super();
+    this.source = { type: Type.Embedded, source: { videoPath, streamIndex } };
+  }
+
+  public async getPayload(time?: number): Promise<string> {
+    if (this.fullyRead) return this._payloadString;
+    this.paused = false;
+    if (!this.listenerCount('extraction-finished')) {
+      this.on('extraction-finished', () => {
+        if (!this.paused && this.currentTime === -1) this.extractSequentially();
+      });
+      this.once('all-finished', () => {
+        this._loadingStatus = Status.FINISHED;
+        this.emit('cache', this.canCache);
+        this.emit('upload', this.canUpload);
+        this.emit('read', this.fullyRead);
+        this.removeAllListeners();
+      });
+    }
+    let result = '';
+    if (time) {
+      this.currentTime = time;
+      await this.extractRandomly();
+      result = this._payloadString;
+      this._payloadString = '';
+    } else this.extractSequentially();
+    return result;
+  }
+
+  public async cache() {
+    if (this.canCache) {
+      this._cacheStatus = Status.WORKING;
+      const { videoPath, streamIndex } = this.source.source;
+      const hash = await mediaQuickHash(videoPath);
+      const subtitlePath = join(await getSubtitleDir(), `${hash}-${streamIndex}.${Format.AdvancedSubStationAplha}`);
+      await writeFile(subtitlePath, this._payloadString);
+      this._cacheStatus = Status.FINISHED;
+      return {
+        type: Type.Local,
+        source: subtitlePath,
+      };
+    }
+    throw new Error('Cannot cache now.');
+  }
+
+  private _payloadString: string = '';
+
+  private _metadataString: string = '';
+
+  private async getMetadata() {
+    if (!this._metadataString) {
+      this._loadingStatus = Status.WORKING;
+      const { videoPath, streamIndex } = this.source.source;
+      const result = await getSubtitleMetadata(videoPath, streamIndex);
+      if (result) this._metadataString = result;
+    }
+  }
+
+  private cacheCount = 0;
+
+  private async extractSequentially() {
+    if (!this._metadataString) await this.getMetadata();
+    const { videoPath, streamIndex } = this.source.source;
+    if (!this.cacheCount) console.time(`${this.source.source.streamIndex}-cache-took: `);
+    this.cacheCount += 1;
+    console.time(`${this.source.source.streamIndex}-cache-${this.cacheCount}`);
+    const result = await cacheSubtitle(videoPath, streamIndex);
+    if (result) {
+      this._payloadString = result;
+      this.emit('all-finished');
+      console.timeEnd(`${this.source.source.streamIndex}-cache-took: `);
+    } else this.emit('extraction-finished');
+    console.timeEnd(`${this.source.source.streamIndex}-cache-${this.cacheCount}`);
+  }
+
+  private currentTime: number = -1;
+
+  private initialRandom: boolean = true;
+
+  private streamCount = 0;
+
+  private async extractRandomly() {
+    if (!this._metadataString) await this.getMetadata();
+    if (this.currentTime !== -1) {
+      this.streamCount += 1;
+      console.time(`${this.source.source.streamIndex}-stream-${this.streamCount}`);
+      const { videoPath, streamIndex } = this.source.source;
+      const result = await getSubtitleFragment(videoPath, streamIndex, this.currentTime);
+      console.timeEnd(`${this.source.source.streamIndex}-stream-${this.streamCount}`);
+      this.currentTime = -1;
+      if (result) {
+        if (this.initialRandom) {
+          this.initialRandom = false;
+          this._payloadString += `${this._metadataString}\n${result}`;
+        } else this._payloadString = result;
+      }
+    }
+    this.emit('extraction-finished');
+  }
+
+  private paused = false;
+
+  public pause() { this.paused = true; }
+
+  public async destroy() {
+    this.removeAllListeners();
+    this._payloadString = '';
+    await finishSubtitleExtraction(this.source.source.videoPath, this.source.source.streamIndex);
+  }
+}
+export interface ISagiOrigin extends IOrigin {
+  type: Type.Online;
+  source: string;
+}
+export class SagiLoader extends EventEmitter implements ILoader {
+  public readonly canPreload = true;
+
+  private _loadingStatus = Status.NOT_STARTED;
+
+  public get fullyRead() { return this._loadingStatus === Status.FINISHED; }
+
+  public get canUpload() { return this._loadingStatus === Status.FINISHED; }
+
+  private _cacheStatus = Status.NOT_STARTED;
+
+  public get canCache() {
+    return this._loadingStatus === Status.FINISHED && this._cacheStatus === Status.NOT_STARTED;
+  }
+
+  public readonly source: ISagiOrigin;
+
+  public constructor(hash: string) {
+    super();
+    this.source = { type: Type.Online, source: hash };
+  }
+
+  private _payloads: SagiSubtitlePayload = [];
+
+  public async getPayload(): Promise<SagiSubtitlePayload> {
+    if (this._loadingStatus === Status.NOT_STARTED) {
+      this._loadingStatus = Status.WORKING;
+      this._payloads = await Sagi.getTranscript({
+        transcriptIdentity: this.source.source,
+        startTime: 0,
+      });
+      this._loadingStatus = Status.FINISHED;
+      this.emit('cache', this.canCache);
+      this.emit('upload', this.canUpload);
+      this.emit('read', this.fullyRead);
+    }
+    return this._payloads;
+  }
+
+  public pause() {}
+
+  public async cache() {
+    if (this.canCache) {
+      const { source } = this.source;
+      this._cacheStatus = Status.NOT_STARTED;
+      const storedPath = join(SUBTITLE_REAL_DIRNAME, `${source}.${formatToExtension(Format.WebVTT)}`);
+      if (!existsSync(storedPath)) {
+        await outputFile(storedPath, sagiSubtitleToWebVTT(this._payloads));
+      }
+      this._cacheStatus = Status.FINISHED;
+      return {
+        type: Type.Local,
+        source: storedPath,
+      };
+    }
+    throw new Error('Cannot cache now.');
+  }
+
+  public async destroy() { this._payloads = []; }
+}

From 572cb7817bbd6036f42044d19a4677139f039a3e Mon Sep 17 00:00:00 2001
From: Yan Yifeng <yanyifeng@splayer.org>
Date: Wed, 4 Sep 2019 18:18:37 +0800
Subject: [PATCH 058/123] refactor(subititle): refactor entity generators

Reimplement entity generators as IEntityGenerator in ISubtitle.

1. Fix some typos in Translated.ts.
---
 .../services/subtitle/loaders/embedded.ts     | 73 +++----------------
 .../services/subtitle/loaders/local.ts        | 17 ++---
 .../services/subtitle/loaders/online.ts       | 20 +----
 .../services/subtitle/loaders/translated.ts   | 20 ++---
 4 files changed, 26 insertions(+), 104 deletions(-)

diff --git a/src/renderer/services/subtitle/loaders/embedded.ts b/src/renderer/services/subtitle/loaders/embedded.ts
index 42158fdcae..e1303e58eb 100644
--- a/src/renderer/services/subtitle/loaders/embedded.ts
+++ b/src/renderer/services/subtitle/loaders/embedded.ts
@@ -1,90 +1,41 @@
 import { cloneDeep } from 'lodash';
-import {
-  IOrigin, Type, IEntityGenerator, Format,
-} from '@/interfaces/ISubtitle';
+import { Type, IEntityGenerator, Format } from '@/interfaces/ISubtitle';
 import { LanguageCode } from '@/libs/language';
 import { mediaQuickHash } from '@/libs/utils';
-import { inferLanguageFromPath, loadLocalFile } from '../utils';
-import { ISubtitleStream, getSubtitlePath } from '@/plugins/mediaTasks';
-
-/**
- * Get extracted embedded subtitles's local src
- *
- * @param {string} videoSrc - path of the video file
- * @param {number} subtitleStreamIndex - the number of the subtitle stream index
- * @param {string} subtitleCodec - the codec of the embedded subtitle
- * @returns the subtitle path string
- */
-export { getSubtitlePath as embeddedSrcLoader } from '@/plugins/mediaTasks';
-
-export interface IEmbeddedOrigin extends IOrigin {
-  type: Type.Embedded,
-  source: {
-    streamIndex: number;
-    videoSrc: string;
-    extractedSrc: string;
-  };
-}
+import { ISubtitleStream } from '@/plugins/mediaTasks';
+import { IEmbeddedOrigin } from '../utils/loaders';
 
 export class EmbeddedGenerator implements IEntityGenerator {
   private origin: IEmbeddedOrigin;
 
-  private format: Format;
-
   private language: LanguageCode = LanguageCode.Default;
 
   public readonly isDefault: boolean;
 
-  public constructor(videoSrc: string, stream: ISubtitleStream) {
+  public constructor(videoPath: string, stream: ISubtitleStream) {
     this.origin = {
       type: Type.Embedded,
       source: {
-        videoSrc,
+        videoPath,
         streamIndex: stream.index,
-        extractedSrc: '',
       },
     };
-    this.format = stream.codecName ? stream.codecName as Format : Format.Unknown;
     this.language = stream.tags && stream.tags.language ? stream.tags.language : LanguageCode.No;
     this.isDefault = !!(stream.disposition && stream.disposition.default);
   }
 
-  public async getSource() { return cloneDeep(this.origin); }
-
-  private type = Type.Embedded;
+  public async getDisplaySource() { return cloneDeep(this.origin); }
 
-  public async getType() { return this.type; }
+  public async getRealSource() { return cloneDeep(this.origin); }
 
-  public async getFormat() { return this.format; }
-
-  private async getExtractedSrc() {
-    const { videoSrc, streamIndex, extractedSrc } = this.origin.source;
-    if (!extractedSrc) {
-      this.origin.source.extractedSrc = await getSubtitlePath(videoSrc, streamIndex, this.format);
-      return this.origin.source.extractedSrc;
-    }
-    return extractedSrc;
-  }
+  public async getFormat() { return Format.AdvancedSubStationAplha; }
 
   public async getHash() {
-    const hash = mediaQuickHash.try(await this.getExtractedSrc());
-    return (hash || '') as unknown as string;
+    const { videoPath, streamIndex } = this.origin.source;
+    return `${await mediaQuickHash.try(videoPath) || ''}-${streamIndex}`;
   }
 
-  public async getLanguage() {
-    if (this.language !== LanguageCode.Default) return this.language;
-    const { videoSrc, streamIndex, extractedSrc } = this.origin.source;
-    if (!extractedSrc) {
-      this.origin.source.extractedSrc = await getSubtitlePath(videoSrc, streamIndex, this.format);
-    }
-    this.language = await inferLanguageFromPath(this.origin.source.extractedSrc);
-    return this.language;
-  }
+  public async getLanguage() { return this.language; }
 
-  private payload: string;
-
-  public async getPayload() {
-    if (!this.payload) this.payload = await loadLocalFile(await this.getExtractedSrc());
-    return this.payload;
-  }
+  public async getDelay() { return 0; }
 }
diff --git a/src/renderer/services/subtitle/loaders/local.ts b/src/renderer/services/subtitle/loaders/local.ts
index e58c98ad8b..0f624466aa 100644
--- a/src/renderer/services/subtitle/loaders/local.ts
+++ b/src/renderer/services/subtitle/loaders/local.ts
@@ -1,5 +1,5 @@
 import { cloneDeep } from 'lodash';
-import { pathToFormat, loadLocalFile, inferLanguageFromPath } from '../utils';
+import { pathToFormat, inferLanguageFromPath } from '../utils';
 
 import {
   IOrigin, Type, IEntityGenerator, Format,
@@ -15,8 +15,6 @@ export class LocalGenerator implements IEntityGenerator {
 
   private format: Format;
 
-  private type = Type.Local;
-
   public constructor(subtitlePath: string) {
     this.origin = { type: Type.Local, source: subtitlePath };
     const format = pathToFormat(subtitlePath);
@@ -24,9 +22,9 @@ export class LocalGenerator implements IEntityGenerator {
     this.format = format;
   }
 
-  public async getSource() { return cloneDeep(this.origin); }
+  public async getDisplaySource() { return cloneDeep(this.origin); }
 
-  public async getType() { return this.type; }
+  public async getRealSource() { return cloneDeep(this.origin); }
 
   public async getFormat() {
     if (this.format) return this.format;
@@ -40,15 +38,10 @@ export class LocalGenerator implements IEntityGenerator {
     return inferLanguageFromPath(this.origin.source);
   }
 
-  private payload: string;
-
-  public async getPayload() {
-    if (!this.payload) this.payload = await loadLocalFile(this.origin.source);
-    return this.payload;
-  }
-
   public async getHash() {
     const hash = await mediaQuickHash(this.origin.source);
     return (hash || '') as unknown as string;
   }
+
+  public async getDelay() { return 0; }
 }
diff --git a/src/renderer/services/subtitle/loaders/online.ts b/src/renderer/services/subtitle/loaders/online.ts
index 007077aa7d..2d0a31d352 100644
--- a/src/renderer/services/subtitle/loaders/online.ts
+++ b/src/renderer/services/subtitle/loaders/online.ts
@@ -1,11 +1,9 @@
 import { TranscriptInfo } from 'sagi-api/translation/v1/translation_pb';
 import { cloneDeep } from 'lodash';
 import { LanguageCode, normalizeCode } from '@/libs/language';
-import Sagi from '@/libs/sagi';
 import {
   IOrigin, IEntityGenerator, Type, Format,
 } from '@/interfaces/ISubtitle';
-import { SagiSubtitlePayload } from '../parsers';
 
 export type TranscriptInfo = TranscriptInfo.AsObject;
 
@@ -32,11 +30,9 @@ export class OnlineGenerator implements IEntityGenerator {
     this.delayInSeconds = transcriptInfo.delay / 1000;
   }
 
-  private type = Type.Online
+  public async getDisplaySource() { return cloneDeep(this.origin); }
 
-  public async getType() { return this.type; }
-
-  public async getSource() { return cloneDeep(this.origin); }
+  public async getRealSource() { return cloneDeep(this.origin); }
 
   public async getLanguage() {
     return this.language;
@@ -49,16 +45,4 @@ export class OnlineGenerator implements IEntityGenerator {
   public async getFormat() { return this.format; }
 
   public async getHash() { return this.origin.source; }
-
-  private payload: SagiSubtitlePayload | undefined;
-
-  public async getPayload() {
-    if (!this.payload) {
-      this.payload = await Sagi.getTranscript({
-        transcriptIdentity: this.origin.source,
-        startTime: 0,
-      });
-    }
-    return this.payload;
-  }
 }
diff --git a/src/renderer/services/subtitle/loaders/translated.ts b/src/renderer/services/subtitle/loaders/translated.ts
index 0ae02089e9..b378ec2305 100644
--- a/src/renderer/services/subtitle/loaders/translated.ts
+++ b/src/renderer/services/subtitle/loaders/translated.ts
@@ -5,7 +5,6 @@ import { LanguageCode, normalizeCode } from '@/libs/language';
 import {
   IOrigin, IEntityGenerator, Type, Format,
 } from '@/interfaces/ISubtitle';
-import Sagi from '@/libs/sagi';
 
 
 interface ITranslatedOrigin extends IOrigin {
@@ -24,10 +23,10 @@ export class TranslatedGenerator implements IEntityGenerator {
 
   public readonly ranking: number;
 
-  private tranlsatedType: TranslatedGeneratorType;
+  private translatedType: TranslatedGeneratorType;
 
   public constructor(transcriptInfo: TranscriptInfo.AsObject | null, languageCode?: LanguageCode) {
-    this.tranlsatedType = transcriptInfo ? TranslatedGeneratorType.Subtitle
+    this.translatedType = transcriptInfo ? TranslatedGeneratorType.Subtitle
       : TranslatedGeneratorType.Button;
     this.origin = {
       type: Type.Translated,
@@ -43,27 +42,22 @@ export class TranslatedGenerator implements IEntityGenerator {
     this.ranking = transcriptInfo ? transcriptInfo.ranking : 0;
   }
 
-  public async getType() { return Type.Translated; }
+  public async getDisplaySource() { return cloneDeep(this.origin); }
 
-  public async getSource() { return cloneDeep(this.origin); }
+  public async getRealSource() { return cloneDeep(this.origin); }
 
   public async getLanguage() {
     return this.language;
   }
 
-  public async getFormat() {
-    return this.tranlsatedType === TranslatedGeneratorType.Subtitle ? Format.Sagi : Format.Unknown;
-  }
+  public async getFormat() { return Format.Sagi; }
 
   public async getHash() {
-    if (this.tranlsatedType === TranslatedGeneratorType.Subtitle) {
+    if (this.translatedType === TranslatedGeneratorType.Subtitle) {
       return this.origin.source;
     }
     return uuidv4();
   }
 
-  public async getPayload() {
-    return this.tranlsatedType === TranslatedGeneratorType.Subtitle
-      ? Sagi.getTranscript({ transcriptIdentity: this.origin.source, startTime: 0 }) : '';
-  }
+  public async getDelay() { return 0; }
 }

From fc1fceff05d2bbcb978ee37078c6dbfbef6a4938 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Wed, 4 Sep 2019 18:32:07 +0800
Subject: [PATCH 059/123] feat(browsing): title

---
 src/renderer/components/BrowsingView.vue              | 11 +++++++++++
 .../components/BrowsingView/BrowsingHeader.vue        |  5 +++++
 .../components/BrowsingView/BrowsingInput.vue         |  6 +++++-
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 3d606d4250..cbfe7241f4 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -9,6 +9,7 @@
     <browsing-header
       ref="browsingHeader"
       :show-sidebar="showSidebar"
+      :title="title"
       :handle-enter-pip="handleEnterPip"
       :handle-global-pip="handleGlobalPip"
       :handle-url-reload="handleUrlReload"
@@ -98,6 +99,7 @@ export default {
       pipInfo: {},
       isGlobal: false,
       startLoading: false,
+      title: 'Splayer',
     };
   },
   computed: {
@@ -302,6 +304,9 @@ export default {
   mounted() {
     this.menuService = new MenuService();
     this.menuService.updateMenuItemEnabled('file.open', false);
+
+    this.title = this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.getTitle();
+
     this.$bus.$on('toggle-reload', this.handleUrlReload);
     this.$bus.$on('toggle-back', this.handleUrlBack);
     this.$bus.$on('toggle-forward', this.handleUrlForward);
@@ -360,6 +365,7 @@ export default {
         e: Event,
         state: { url: string; canGoBack: boolean; canGoForward: boolean },
       ) => {
+        this.title = this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.getTitle();
         this.currentUrl = urlParseLax(state.url).href;
         this.removeListener();
         this.addListenerToBrowser();
@@ -426,6 +432,9 @@ export default {
       this.isGlobal = true;
       this.handleEnterPip();
     },
+    handlePageTitle(e: Event, title: string) {
+      this.title = title;
+    },
     focusHandler() {
       this.menuService.updateFocusedWindow(true);
       this.updatePipState(this.hasVideo);
@@ -555,6 +564,7 @@ export default {
     addListenerToBrowser() {
       const view = this.$electron.remote.getCurrentWindow().getBrowserViews()[0];
       view.webContents.addListener('ipc-message', this.ipcMessage);
+      view.webContents.addListener('page-title-updated', this.handlePageTitle);
       view.webContents.addListener('dom-ready', this.domReady);
       view.webContents.addListener('new-window', this.newWindow);
       view.webContents.addListener('did-start-loading', this.didStartLoading);
@@ -571,6 +581,7 @@ export default {
           'did-stop-loading',
           this.didStopLoading,
         );
+        currentWebContents.removeListener('page-title-updated', this.handlePageTitle);
         currentWebContents.removeListener('dom-ready', this.domReady);
         currentWebContents.removeListener('ipc-message', this.ipcMessage);
         currentWebContents.removeListener(
diff --git a/src/renderer/components/BrowsingView/BrowsingHeader.vue b/src/renderer/components/BrowsingView/BrowsingHeader.vue
index 61e7872299..9e6e3e713b 100644
--- a/src/renderer/components/BrowsingView/BrowsingHeader.vue
+++ b/src/renderer/components/BrowsingView/BrowsingHeader.vue
@@ -11,6 +11,7 @@
     />
     <browsing-input
       :handle-url-reload="handleUrlReload"
+      :title="title"
       :close-url-input="closeUrlInput"
       :play-file-with-playing-view="playFileWithPlayingView"
     />
@@ -40,6 +41,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    title: {
+      type: String,
+      default: 'Splayer',
+    },
     handleEnterPip: {
       type: Function,
       required: true,
diff --git a/src/renderer/components/BrowsingView/BrowsingInput.vue b/src/renderer/components/BrowsingView/BrowsingInput.vue
index 2c92f5f82c..356d150f79 100644
--- a/src/renderer/components/BrowsingView/BrowsingInput.vue
+++ b/src/renderer/components/BrowsingView/BrowsingInput.vue
@@ -5,7 +5,7 @@
     <div
       class="url-search"
     >
-      Splayer
+      {{ title }}
     </div>
     <Icon
       @mouseup.native="handleUrlReload"
@@ -27,6 +27,10 @@ export default {
     Icon,
   },
   props: {
+    title: {
+      type: String,
+      default: 'Splayer',
+    },
     handleUrlReload: {
       type: Function,
       required: true,

From b938e1507e65d334bb6e48bd561284b99212711a Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Wed, 4 Sep 2019 18:52:11 +0800
Subject: [PATCH 060/123] feat(browsing): title bar

---
 .../assets/icon/pageRefresh-hover-icon.svg    | 21 ++++++-----
 .../components/BrowsingView/BrowsingInput.vue | 37 ++++++++++++-------
 2 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/src/renderer/assets/icon/pageRefresh-hover-icon.svg b/src/renderer/assets/icon/pageRefresh-hover-icon.svg
index 3a931e56e0..61536e5b4f 100644
--- a/src/renderer/assets/icon/pageRefresh-hover-icon.svg
+++ b/src/renderer/assets/icon/pageRefresh-hover-icon.svg
@@ -1,12 +1,15 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
-    <desc>Created with Sketch.</desc>
-    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="1">
-        <g id="browseing" transform="translate(-340.000000, -323.000000)" fill="#6F7078" fill-rule="nonzero">
-            <g id="control-bar" transform="translate(238.000000, 300.000000)">
-                <g id="icon-refresh" transform="translate(98.000000, 19.000000)">
-                    <path d="M19.9275636,23.9920296 C20.3650254,23.4227245 20.2581454,22.6065787 19.6888403,22.1691168 C19.1195352,21.7316549 18.3033893,21.838535 17.8659275,22.4078401 C16.98761,23.5508667 16.3399248,24.4093268 15.9201976,24.9870317 C15.70106,25.2886488 15.5406853,25.5182327 15.433665,25.684841 C15.3602796,25.7990867 15.3053307,25.8928755 15.2591332,25.9907264 C15.2027547,26.105821 15.2027547,26.105821 15.1306023,26.4247782 C15.0986066,26.7012347 15.0986066,26.7012347 15.3087888,27.266275 C15.8834144,27.8466713 15.8834144,27.8466713 16.4822263,27.8963696 C22.760792,27.6355905 27.8,22.2689278 27.8,15.9070924 C27.8,12.4110703 26.2702442,9.16081599 23.6658784,6.9325943 C21.5446155,5.11770182 18.8489726,4.10249962 16,4.10249962 C9.48291266,4.10249962 4.2,9.38772305 4.2,15.9070924 C4.2,18.5715924 5.08653001,21.1044742 6.69120849,23.1623351 C7.83714485,24.631899 9.3164956,25.8144882 11.0052919,26.6047987 C11.6555786,26.9091151 12.4294372,26.6286508 12.7337536,25.9783642 C13.03807,25.3280775 12.7576057,24.5542189 12.107319,24.2499025 C10.7908372,23.633825 9.63608734,22.7107209 8.74153335,21.563533 C7.49000766,19.9585599 6.8,17.9871571 6.8,15.9070924 C6.8,10.8234089 10.9191076,6.70249962 16,6.70249962 C18.2232077,6.70249962 20.320979,7.49253827 21.9756109,8.90819441 C24.0085468,10.6475168 25.2,13.1789836 25.2,15.9070924 C25.2,19.7782293 22.8118095,23.1835609 19.4592128,24.603186 C19.6070218,24.4097288 19.7631448,24.2060013 19.9275636,23.9920296 Z" id="refresh" transform="translate(16.000000, 15.999435) rotate(-126.000000) translate(-16.000000, -15.999435) "></path>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="各类图标的鼠标悬浮状态" transform="translate(-627.000000, -13.000000)" fill="#B8BACC" fill-rule="nonzero">
+            <g id="browserArea" transform="translate(76.000000, 0.000000)">
+                <g id="menuBar">
+                    <g id="urlBar" transform="translate(114.000000, 0.000000)">
+                        <g id="button" transform="translate(429.000000, 5.000000)">
+                            <g id="icon" transform="translate(8.000000, 8.000000)">
+                                <path d="M7.0256625,-3.55271368e-15 C8.46334264,0.00363212247 9.84358073,0.43360079 11.0211861,1.25103347 L11.5200201,0.581799064 C11.6159588,0.449237254 11.818906,0.475013145 11.8816351,0.625986327 L11.8816351,0.625986327 L13.040279,3.45028933 C13.0993182,3.59389795 12.9886197,3.74855338 12.8336419,3.73750657 L12.8336419,3.73750657 L9.7340849,3.5202525 C9.5680372,3.50920569 9.47947843,3.32140979 9.57910704,3.18884798 L9.57910704,3.18884798 L10.137,2.438 L9.97600289,2.33005594 C9.09172631,1.77053379 8.07360794,1.47659128 7.0182826,1.47659128 L6.95555347,1.47659128 C5.52385334,1.49132036 4.16595218,2.05839032 3.13645647,3.07101525 C2.10696075,4.08364017 1.52025891,5.42766964 1.48335942,6.85639137 C1.44276999,8.35875854 2.00364221,9.77643346 3.0552776,10.8553393 C4.10691302,11.9342451 5.51647345,12.527091 7.0182826,12.527091 C8.39463349,12.527091 9.71563517,12.0152551 10.737751,11.0910047 C11.7524869,10.1704366 12.3871581,8.92214623 12.5236862,7.57075224 C12.5605857,7.19516046 12.8779213,6.91162546 13.257986,6.91162546 C13.4683131,6.91162546 13.6675703,7 13.8077884,7.15465544 C13.9480064,7.30931089 14.0181154,7.52288269 13.9959758,7.73277221 C13.8188582,9.44502891 13.0107594,11.0247238 11.7266572,12.1883219 C10.4314852,13.3556023 8.75993842,14 7.01459266,14 C3.14752633,14 7.28306304e-14,10.8590216 7.28306304e-14,7 C7.28306304e-14,5.13677011 0.730609862,3.38032613 2.05899143,2.05470805 C3.38737299,0.729089954 5.14747857,-3.55271368e-15 7.01459266,-3.55271368e-15 L7.0256625,-3.55271368e-15 Z" id="icon--refresh"></path>
+                            </g>
+                        </g>
+                    </g>
                 </g>
             </g>
         </g>
diff --git a/src/renderer/components/BrowsingView/BrowsingInput.vue b/src/renderer/components/BrowsingView/BrowsingInput.vue
index 356d150f79..b0a3d60775 100644
--- a/src/renderer/components/BrowsingView/BrowsingInput.vue
+++ b/src/renderer/components/BrowsingView/BrowsingInput.vue
@@ -7,14 +7,17 @@
     >
       {{ title }}
     </div>
-    <Icon
-      @mouseup.native="handleUrlReload"
-      :style="{
-        cursor: 'pointer',
-      }"
-      type="pageRefresh"
-      class="page-refresh-icon"
-    />
+    <div
+      @mouseup="handleUrlReload"
+      class="control-button page-refresh-icon no-drag"
+    >
+      <Icon
+        :style="{
+          cursor: 'pointer',
+        }"
+        type="pageRefresh"
+      />
+    </div>
   </div>
 </template>
 
@@ -89,12 +92,20 @@ export default {
     letter-spacing: 0.09px;
     text-align: center;
   }
+  .control-button {
+    width: 30px;
+    height: 30px;
+    border-radius: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: background-color 100ms ease-in;
+    &:hover {
+      background-color: #F5F6F8;
+    }
+  }
   .page-refresh-icon {
-    width: 16px;
-    height: 16px;
-    -webkit-app-region: no-drag;
-    margin-right: 16px;
-    margin-left: 12px;
+    margin-right: 8px;
   }
 }
 </style>

From 0fc6f211fd8b7c71b3b3138714976dd6a48de543 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Wed, 4 Sep 2019 20:01:01 +0800
Subject: [PATCH 061/123] feat(browsing): pip control

---
 src/renderer/App.vue                          |  2 +-
 .../assets/icon/down-default-icon.svg         | 14 ++++++
 src/renderer/assets/icon/pip-default-icon.svg | 15 +++----
 src/renderer/components/BaseIconContainer.vue | 43 ++++---------------
 .../BrowsingView/BrowsingHeader.vue           |  1 +
 .../components/BrowsingView/BrowsingInput.vue |  3 ++
 .../BrowsingView/BrowsingPipControl.vue       | 39 ++++++++++++++---
 7 files changed, 66 insertions(+), 51 deletions(-)
 create mode 100644 src/renderer/assets/icon/down-default-icon.svg

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 6cb676a3a0..f3c91bb7da 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -58,7 +58,7 @@ export default {
     $route(to: any, from: any) {
       if (to.name === 'landing-view' && from.name === 'language-setting') this.transitionMode = 'fade';
       else this.transitionMode = '';
-      if (to.name !== 'browsing-view') this.showSidebar = false;
+      if (to.name !== 'browsing-view' && !(to.name === 'landing-view' && from.name === 'browsing-view')) this.showSidebar = false;
     },
     showSidebar(val: boolean) {
       ipcRenderer.send('update-sidebar', val);
diff --git a/src/renderer/assets/icon/down-default-icon.svg b/src/renderer/assets/icon/down-default-icon.svg
new file mode 100644
index 0000000000..e40f996959
--- /dev/null
+++ b/src/renderer/assets/icon/down-default-icon.svg
@@ -0,0 +1,14 @@
+
+<svg width="7px" height="5px" viewBox="0 0 7 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="各类图标的鼠标悬浮状态" transform="translate(-699.000000, -18.000000)" stroke="#B8BACC" stroke-width="1.4">
+            <g id="browserArea" transform="translate(76.000000, 0.000000)">
+                <g id="menuBar">
+                    <g id="button--pictureInPicture" transform="translate(590.000000, 5.000000)">
+                        <path d="M34.5,14.5 L36.0311146,16.0954996 C36.4135159,16.4939813 37.0465467,16.5070171 37.4450284,16.1246157 C37.4549326,16.1151112 37.46464,16.1054038 37.4741445,16.0954996 L39.0052592,14.5 L39.0052592,14.5" id="路径"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/renderer/assets/icon/pip-default-icon.svg b/src/renderer/assets/icon/pip-default-icon.svg
index 643a634875..653e64813a 100644
--- a/src/renderer/assets/icon/pip-default-icon.svg
+++ b/src/renderer/assets/icon/pip-default-icon.svg
@@ -1,10 +1,9 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="30px" height="23px" viewBox="0 0 30 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
-    <desc>Created with Sketch.</desc>
-    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.7">
-        <g id="icon-pictureInPicture" transform="translate(-1.000000, -5.000000)" fill="#BBBACC" fill-rule="nonzero">
-            <path d="M3.43,5 L28.57,5 C29.9120519,5 31,6.08794806 31,7.43 L31,25.07 C31,26.4120519 29.9120519,27.5 28.57,27.5 L3.43,27.5 C2.08794806,27.5 1,26.4120519 1,25.07 L1,7.43 C1,6.08794806 2.08794806,5 3.43,5 Z M3.5,8.3 L3.5,24.2 C3.5,24.6418278 3.8581722,25 4.3,25 L27.7,25 C28.1418278,25 28.5,24.6418278 28.5,24.2 L28.5,8.3 C28.5,7.8581722 28.1418278,7.5 27.7,7.5 L4.3,7.5 C3.8581722,7.5 3.5,7.8581722 3.5,8.3 Z M14.6696026,14.5395022 L25.4438391,14.5395022 C25.8911898,14.5395022 26.2538391,14.9021515 26.2538391,15.3495022 L26.2538391,21.7295022 C26.2538391,22.1768528 25.8911898,22.5395022 25.4438391,22.5395022 L14.6696026,22.5395022 C14.222252,22.5395022 13.8596026,22.1768528 13.8596026,21.7295022 L13.8596026,15.3495022 C13.8596026,14.9021515 14.222252,14.5395022 14.6696026,14.5395022 Z" id="pictureInPicture"></path>
+<svg width="18px" height="14px" viewBox="0 0 18 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="menuBar/__button/--withMoreType" transform="translate(-11.000000, -13.000000)" fill="#6F7078" fill-rule="nonzero">
+            <g id="icon" transform="translate(11.000000, 13.000000)">
+                <path d="M16.542,0.25 C17.3472312,0.25 18,0.902768835 18,1.708 L18,12.292 C18,13.0972312 17.3472312,13.75 16.542,13.75 L1.458,13.75 C0.652768835,13.75 0,13.0972312 0,12.292 L0,1.708 C0,0.902768835 0.652768835,0.25 1.458,0.25 L16.542,0.25 Z M16.02,1.75 L1.98,1.75 C1.71490332,1.75 1.5,1.96490332 1.5,2.23 L1.5,11.77 C1.5,12.0350967 1.71490332,12.25 1.98,12.25 L16.02,12.25 C16.2850967,12.25 16.5,12.0350967 16.5,11.77 L16.5,2.23 C16.5,1.96490332 16.2850967,1.75 16.02,1.75 Z M13.6663035,5.4737013 C13.9347139,5.4737013 14.1523035,5.69129091 14.1523035,5.9597013 L14.1523035,9.7877013 C14.1523035,10.0561117 13.9347139,10.2737013 13.6663035,10.2737013 L7.20176158,10.2737013 C6.9333512,10.2737013 6.71576158,10.0561117 6.71576158,9.7877013 L6.71576158,5.9597013 C6.71576158,5.69129091 6.9333512,5.4737013 7.20176158,5.4737013 L13.6663035,5.4737013 Z" id="icon-pictureInPicture"></path>
+            </g>
         </g>
     </g>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/components/BaseIconContainer.vue b/src/renderer/components/BaseIconContainer.vue
index d4115d9c0c..e01c35ffb7 100644
--- a/src/renderer/components/BaseIconContainer.vue
+++ b/src/renderer/components/BaseIconContainer.vue
@@ -557,6 +557,10 @@ screen and (min-aspect-ratio: 1/1) and (min-height: 1080px) {
   width: 16px;
   height: 16px;
 }
+.down {
+  width: 7px;
+  height: 5px;
+}
 .showMarks, .hideMarks, .closeSearch {
   width: 18px;
   height: 18px;
@@ -621,45 +625,14 @@ screen and (min-aspect-ratio: 1/1) and (min-height: 1080px) {
     }
   }
 }
-.pipDisabled, .videoRecordDisabled {
+.videoRecordDisabled {
   display: block;
   width: 20px;
   height: 20px;
 }
-.pip {
-  width: 20px;
-  height: 20px;
-  .default {
-    display: block;
-  }
-  .hover {
-    display: none;
-  }
-  .active {
-    display: none;
-  }
-  &:hover {
-    .default {
-      display: none;
-    }
-    .hover {
-      display: block;
-    }
-    .active {
-      display: none;
-    }
-  }
-  &:active {
-    .default {
-      display: none;
-    }
-    .hover {
-      display: none;
-    }
-    .active {
-      display: block;
-    }
-  }
+.pip, .pipDisabled{
+  width: 18px;
+  height: 14px;
 }
 .pipRecord, .pipBack {
   width: 20px;
diff --git a/src/renderer/components/BrowsingView/BrowsingHeader.vue b/src/renderer/components/BrowsingView/BrowsingHeader.vue
index 9e6e3e713b..f62507dc1d 100644
--- a/src/renderer/components/BrowsingView/BrowsingHeader.vue
+++ b/src/renderer/components/BrowsingView/BrowsingHeader.vue
@@ -16,6 +16,7 @@
       :play-file-with-playing-view="playFileWithPlayingView"
     />
     <browsing-pip-control
+      :has-video="hasVideo"
       :handle-enter-pip="handleEnterPip"
       :handle-global-pip="handleGlobalPip"
     />
diff --git a/src/renderer/components/BrowsingView/BrowsingInput.vue b/src/renderer/components/BrowsingView/BrowsingInput.vue
index b0a3d60775..0dd935628e 100644
--- a/src/renderer/components/BrowsingView/BrowsingInput.vue
+++ b/src/renderer/components/BrowsingView/BrowsingInput.vue
@@ -91,6 +91,9 @@ export default {
     color: rgba(15, 26, 59, 0.5);
     letter-spacing: 0.09px;
     text-align: center;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
   .control-button {
     width: 30px;
diff --git a/src/renderer/components/BrowsingView/BrowsingPipControl.vue b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
index 16c6d348b2..1de8a66f34 100644
--- a/src/renderer/components/BrowsingView/BrowsingPipControl.vue
+++ b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
@@ -2,11 +2,18 @@
   <div
     class="pip-control"
   >
-    <Icon
-      :type="picInPicType"
-      @mouseup.native="handleGlobalPip"
-      class="control"
-    />
+    <div
+      @mouseup="handleGlobalPip"
+      class="pip-icon no-drag"
+    >
+      <Icon
+        :type="picInPicType"
+      />
+      <Icon
+        type="down"
+        class="down-icon"
+      />
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -25,6 +32,10 @@ export default {
       type: Function,
       required: true,
     },
+    hasVideo: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     picInPicType() {
@@ -37,16 +48,30 @@ export default {
 </script>
 <style lang="scss" scoped>
 .pip-control {
+  min-width: 62px;
   z-index: 6;
   display: flex;
+  width: 62px;
   height: 100%;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   border-left: 1px solid #F2F1F4;
-  .control {
+  .pip-icon {
     width: 46px;
+    height: 30px;
     margin-right: 8px;
     margin-left: 8px;
+    border-radius: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: background-color 100ms ease-in;
+    &:hover {
+      background-color: #F5F6F8;
+    }
+  }
+  .down-icon {
+    margin-left: 5.5px;
   }
 }
 </style>

From 25b16adbee1f0327a70f1cdbda74d184e1e9c63e Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Thu, 5 Sep 2019 10:57:50 +0800
Subject: [PATCH 062/123] fix(browsingview): fix may play video in hidden
 window

---
 src/main/helpers/BrowserViewManager.ts        | 34 +++++++++----------
 src/renderer/components/BrowsingView.vue      |  1 +
 .../BrowsingView/BrowsingHeader.vue           |  1 -
 static/pip/titlebarPreload.js                 |  2 +-
 4 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/main/helpers/BrowserViewManager.ts b/src/main/helpers/BrowserViewManager.ts
index 05d59bf7fe..ad70380ff8 100644
--- a/src/main/helpers/BrowserViewManager.ts
+++ b/src/main/helpers/BrowserViewManager.ts
@@ -65,27 +65,25 @@ export class BrowserViewManager implements IBrowserViewManager {
       }),
     };
     // loadURL
-    page.view.webContents.loadURL(page.url).then(() => {
-      if (channel === this.currentChannel) {
-        page.view.webContents.executeJavaScript('var iframe = document.querySelector("iframe");if (iframe && iframe.contentDocument) {document.getElementsByTagName("video").length + iframe.contentDocument.getElementsByTagName("video").length} else {document.getElementsByTagName("video").length}').then((r: number) => {
-          const hasLastPage = this.history[channel].list.length;
-          if (hasLastPage && r) {
-            page.view.webContents.once('media-started-playing', () => {
-              if (this.currentChannel.includes('bilibili')) {
-                let type = '';
-                page.view.webContents
-                  .executeJavaScript(bilibiliFindType).then((r: (HTMLElement | null)[]) => {
-                    type = ['bangumi', 'videoStreaming', 'iframeStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
-                    page.view.webContents.executeJavaScript(bilibiliVideoPause(type));
-                  });
-              } else {
-                page.view.webContents.executeJavaScript('setTimeout(() => { document.querySelector("video").pause(); }, 100)');
-              }
-            });
+    page.view.webContents.loadURL(page.url);
+    if (channel === this.currentChannel) {
+      const hasLastPage = this.history[channel].list.length;
+      if (hasLastPage) {
+        page.view.webContents.once('media-started-playing', () => {
+          if (page.view.webContents.getURL() !== page.url) return;
+          if (this.currentChannel.includes('bilibili')) {
+            let type = '';
+            page.view.webContents
+              .executeJavaScript(bilibiliFindType).then((r: (HTMLElement | null)[]) => {
+                type = ['bangumi', 'videoStreaming', 'iframeStreaming', 'iframeStreaming', 'video'][r.findIndex(i => i)] || 'others';
+                page.view.webContents.executeJavaScript(bilibiliVideoPause(type));
+              });
+          } else {
+            page.view.webContents.executeJavaScript('setTimeout(() => { document.querySelector("video").pause(); }, 100)');
           }
         });
       }
-    });
+    }
 
     // 暂停当前视频
     if (this.currentChannel) {
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 86e23cc92b..111d162147 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -476,6 +476,7 @@ export default {
           .finally(() => {
             this.asyncTasksDone = true;
             if (!this.isPip) {
+              this.$electron.ipcRenderer.send('remove-browser');
               window.close();
             } else {
               this.isGlobal = true;
diff --git a/src/renderer/components/BrowsingView/BrowsingHeader.vue b/src/renderer/components/BrowsingView/BrowsingHeader.vue
index 24d89e1f49..7ae2eaa51f 100644
--- a/src/renderer/components/BrowsingView/BrowsingHeader.vue
+++ b/src/renderer/components/BrowsingView/BrowsingHeader.vue
@@ -22,7 +22,6 @@
 </template>
 
 <script lang="ts">
-import electron from 'electron';
 import { mapGetters } from 'vuex';
 import BrowsingInput from '@/components/BrowsingView/BrowsingInput.vue';
 import BrowsingControl from '@/components/BrowsingView/BrowsingControl.vue';
diff --git a/static/pip/titlebarPreload.js b/static/pip/titlebarPreload.js
index 0503f0a3bf..7d7150c578 100644
--- a/static/pip/titlebarPreload.js
+++ b/static/pip/titlebarPreload.js
@@ -87,7 +87,7 @@ document.addEventListener('DOMContentLoaded', () => {
   });
   window.addEventListener('mouseout', (e) => {
     const winSize = remote.getCurrentWindow().getSize();
-    if (e.clientY <= 0 || e.clientX <= 0 || e.clientX >= winSize[1]) {
+    if (e.clientY <= 0 || e.clientX <= 0 || e.clientX >= winSize[0]) {
       ipcRenderer.send('mouseout', 'out');
     }
   });

From 67f0b8c71998863387aa8342c19f45d1440393ad Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Thu, 5 Sep 2019 13:10:34 +0800
Subject: [PATCH 063/123] fix(sidebar): add missing slash

---
 src/renderer/components/Sidebar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/Sidebar.vue b/src/renderer/components/Sidebar.vue
index c872f15017..d436b10eb3 100644
--- a/src/renderer/components/Sidebar.vue
+++ b/src/renderer/components/Sidebar.vue
@@ -36,7 +36,7 @@ export default {
   },
   methods: {
     handleSidebarIcon(site: string) {
-      const url = `https://www.${site}.com`;
+      const url = `https://www.${site}.com/`;
 
       if (this.$route.name === 'browsing-view') {
         this.$bus.$emit('sidebar-selected', url);

From 8d72068e424cb449a30dd1d4130cb7d42d0a0835 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Thu, 5 Sep 2019 13:16:18 +0800
Subject: [PATCH 064/123] feat(browsingview): add logic to handle url changed
 in pip window

---
 src/main/index.js                        |  9 ++-
 src/renderer/components/BrowsingPip.vue  | 88 +++++++++++++++++++++++-
 src/renderer/components/BrowsingView.vue | 77 +++++++++++++--------
 src/renderer/components/Sidebar.vue      |  2 +-
 4 files changed, 141 insertions(+), 35 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index 32d3207706..c79936006e 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -777,6 +777,7 @@ function registerMainWindowEvent(mainWindow) {
     pipBrowser.setAutoResize({
       width: true, height: true,
     });
+    browsingWindow.send('update-pip-listener');
     mainWindow.send('update-browser-state', {
       url: mainBrowser.page.url,
       canGoBack: mainBrowser.canBack,
@@ -803,6 +804,7 @@ function registerMainWindowEvent(mainWindow) {
   });
   ipcMain.on('exit-pip', () => {
     if (!browserViewManager) return;
+    browsingWindow.send('remove-pip-listener');
     mainWindow.show();
     const mainView = mainWindow.getBrowserView();
     mainWindow.removeBrowserView(mainView);
@@ -827,9 +829,6 @@ function registerMainWindowEvent(mainWindow) {
       canGoBack: exitBrowser.canBack,
       canGoForward: exitBrowser.canForward,
     });
-    if (!mainWindow.isVisible()) {
-      mainWindow.show();
-    }
     if (browsingWindow.isFullScreen()) {
       hideBrowsingWindow = true;
       browsingWindow.setFullScreen(false);
@@ -1217,7 +1216,7 @@ app.on('menu-create-main-window', () => {
   if (!mainWindow) createMainWindow();
   else if (mainWindow.isMinimized()) {
     mainWindow.restore();
-  } else if (!mainWindow.isVisible()) {
+  } else if (!mainWindow.isVisible() && (!browsingWindow || !browsingWindow.isVisible())) {
     mainWindow.show();
   }
 });
@@ -1229,7 +1228,7 @@ app.on('menu-open-dialog', (playlistId) => {
 app.on('activate', () => {
   if (!mainWindow) {
     if (app.isReady()) createMainWindow();
-  } else if (!mainWindow.isVisible() && !browsingWindow) {
+  } else if (!mainWindow.isVisible()) {
     mainWindow.show();
   }
   if (browsingWindow && browsingWindow.isMinimized()) {
diff --git a/src/renderer/components/BrowsingPip.vue b/src/renderer/components/BrowsingPip.vue
index 1f20118147..7727125adf 100644
--- a/src/renderer/components/BrowsingPip.vue
+++ b/src/renderer/components/BrowsingPip.vue
@@ -5,6 +5,8 @@
 <script lang="ts">
 import { throttle } from 'lodash';
 import electron from 'electron';
+// @ts-ignore
+import urlParseLax from 'url-parse-lax';
 import MenuService from '@/services/menu/MenuService';
 import asyncStorage from '@/helpers/asyncStorage';
 
@@ -17,6 +19,8 @@ export default {
       asyncTasksDone: false,
       windowSize: [],
       offset: [],
+      currentUrl: '',
+      canListenUrlChange: false,
     };
   },
   computed: {
@@ -25,6 +29,31 @@ export default {
     },
   },
   mounted() {
+    electron.ipcRenderer.on('remove-pip-listener', () => {
+      const view = electron.remote.getCurrentWindow().getBrowserViews()[0];
+      if (view) {
+        if (this.canListenUrlChange) {
+          view.webContents.removeListener('dom-ready', this.handleDomReady);
+        } else {
+          view.webContents.removeListener('did-start-loading', this.handleStartLoading);
+        }
+        view.webContents.removeListener('new-window', this.handleNewWindow);
+        view.webContents.removeListener('ipc-message', this.handleIpcMessage);
+      }
+    });
+    electron.ipcRenderer.on('update-pip-listener', () => {
+      this.currentUrl = electron.remote.getCurrentWindow()
+        .getBrowserViews()[0].webContents.getURL();
+      this.canListenUrlChange = this.currentUrl.includes('iqiyi') || this.currentUrl.includes('youtube');
+      const view = electron.remote.getCurrentWindow().getBrowserViews()[0];
+      if (this.canListenUrlChange) {
+        view.webContents.addListener('dom-ready', this.handleDomReady);
+      } else {
+        view.webContents.addListener('did-start-loading', this.handleStartLoading);
+      }
+      view.webContents.addListener('new-window', this.handleNewWindow);
+      view.webContents.addListener('ipc-message', this.handleIpcMessage);
+    });
     electron.ipcRenderer.on('update-mouse-info', (evt: Event, args: { windowSize: number[] | null, offset: number[]}) => {
       this.offset = args.offset;
       this.windowSize = args.windowSize;
@@ -103,6 +132,63 @@ export default {
     getRatio() {
       return process.platform === 'win32' ? window.devicePixelRatio || 1 : 1;
     },
+    handleUrlChange(url: string) {
+      const newHostname = urlParseLax(url).hostname;
+      const oldHostname = urlParseLax(this.currentUrl).hostname;
+      let newChannel = newHostname.slice(
+        newHostname.indexOf('.') + 1,
+        newHostname.length,
+      );
+      let oldChannel = oldHostname.slice(
+        oldHostname.indexOf('.') + 1,
+        oldHostname.length,
+      );
+      if (url.includes('youtube')) {
+        newChannel = 'youtube.com';
+      }
+      if (this.currentUrl.includes('youtube')) {
+        oldChannel = 'youtube.com';
+      }
+      if (url !== this.currentUrl) {
+        if (newChannel === oldChannel) {
+          this.currentUrl = url;
+          const view = electron.remote.getCurrentWindow().getBrowserViews()[0];
+          if (this.canListenUrlChange) {
+            view.webContents.removeListener('dom-ready', this.handleDomReady);
+          } else {
+            view.webContents.removeListener('did-start-loading', this.handleStartLoading);
+          }
+          view.webContents.removeListener('new-window', this.handleNewWindow);
+          view.webContents.removeListener('ipc-message', this.handleIpcMessage);
+          electron.ipcRenderer.send('pip');
+        } else {
+          electron.shell.openExternal(url);
+        }
+      }
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    handleIpcMessage(evt: Event, channel: string, args: any) {
+      if (channel === 'open-url') {
+        this.handleUrlChange(args.url);
+      }
+    },
+    handleDomReady() {
+      const views = electron.remote.getCurrentWindow().getBrowserViews();
+      if (views[0]) {
+        const url = views[0].webContents.getURL();
+        this.handleUrlChange(url);
+      }
+    },
+    handleNewWindow(e: Event, url: string) {
+      this.handleUrlChange(url);
+    },
+    handleStartLoading() {
+      const views = electron.remote.getCurrentWindow().getBrowserViews();
+      if (views[0]) {
+        const url = views[0].webContents.getURL();
+        this.handleUrlChange(url);
+      }
+    },
   },
 };
 </script>
@@ -110,7 +196,7 @@ export default {
 <style scoped>
 .pip {
   width: 100%;
-  height: 36px;
+  height: 0;
   position: absolute;
   top: 0;
   -webkit-app-region: no-drag;
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 0c37ad5a41..166955011c 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -365,7 +365,8 @@ export default {
         e: Event,
         state: { url: string; canGoBack: boolean; canGoForward: boolean },
       ) => {
-        this.title = this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.getTitle();
+        this.title = this.$electron.remote.getCurrentWindow()
+          .getBrowserViews()[0].webContents.getTitle();
         this.currentUrl = urlParseLax(state.url).href;
         this.removeListener();
         this.addListenerToBrowser();
@@ -480,8 +481,8 @@ export default {
             barrageOpen: this.barrageOpen,
           })
           .finally(() => {
-            this.asyncTasksDone = true;
             if (!this.isPip) {
+              this.asyncTasksDone = true;
               this.$electron.ipcRenderer.send('remove-browser');
               window.close();
             } else {
@@ -558,39 +559,38 @@ export default {
       } else {
         const homePage = urlParseLax(`https://www.${newChannel}`).href;
         this.$electron.ipcRenderer.send('create-browser-view', {
-          url: homePage,
+          url: homePage, isNewWindow: true,
         });
       }
     },
     addListenerToBrowser() {
       const view = this.$electron.remote.getCurrentWindow().getBrowserViews()[0];
-      view.webContents.addListener('ipc-message', this.ipcMessage);
-      view.webContents.addListener('page-title-updated', this.handlePageTitle);
-      view.webContents.addListener('dom-ready', this.domReady);
-      view.webContents.addListener('new-window', this.newWindow);
-      view.webContents.addListener('did-start-loading', this.didStartLoading);
-      view.webContents.addListener('did-stop-loading', this.didStopLoading);
-      view.webContents.addListener('will-navigate', this.willNavigate);
+      if (view) {
+        view.webContents.addListener('ipc-message', this.ipcMessage);
+        view.webContents.addListener('page-title-updated', this.handlePageTitle);
+        view.webContents.addListener('dom-ready', this.domReady);
+        view.webContents.addListener('new-window', this.newWindow);
+        view.webContents.addListener('did-start-loading', this.didStartLoading);
+        view.webContents.addListener('did-stop-loading', this.didStopLoading);
+        view.webContents.addListener('will-navigate', this.willNavigate);
+      }
     },
     removeListener() {
-      const currentBrowserViews = this.$electron.remote
-        .getCurrentWindow()
-        .getBrowserViews();
-      if (currentBrowserViews.length) {
-        const currentWebContents = currentBrowserViews[0].webContents;
-        currentWebContents.removeListener(
+      const view = this.$electron.remote.getCurrentWindow().getBrowserViews()[0];
+      if (view) {
+        view.webContents.removeListener(
           'did-stop-loading',
           this.didStopLoading,
         );
-        currentWebContents.removeListener('page-title-updated', this.handlePageTitle);
-        currentWebContents.removeListener('dom-ready', this.domReady);
-        currentWebContents.removeListener('ipc-message', this.ipcMessage);
-        currentWebContents.removeListener(
+        view.webContents.removeListener('page-title-updated', this.handlePageTitle);
+        view.webContents.removeListener('dom-ready', this.domReady);
+        view.webContents.removeListener('ipc-message', this.ipcMessage);
+        view.webContents.removeListener(
           'did-start-loading',
           this.didStartLoading,
         );
-        currentWebContents.removeListener('new-window', this.newWindow);
-        currentWebContents.removeListener('will-navigate', this.willNavigate);
+        view.webContents.removeListener('new-window', this.newWindow);
+        view.webContents.removeListener('will-navigate', this.willNavigate);
       }
     },
     newWindow(e: Event, url: string, disposition: string) {
@@ -715,13 +715,34 @@ export default {
           || url === 'about:blank'
           || urlParseLax(url).href === urlParseLax(this.currentUrl).href
         ) return;
-        this.loadingState = true;
-        this.currentUrl = urlParseLax(url).href;
         const protocol = urlParseLax(url).protocol;
-        this.$electron.ipcRenderer.send('create-browser-view', {
-          url: protocol ? this.currentUrl : `https:${this.currentUrl}`,
-          isNewWindow: true,
-        });
+        const openUrl = protocol ? url : `https:${url}`;
+        const newHostname = urlParseLax(openUrl).hostname;
+        const oldHostname = urlParseLax(this.currentUrl).hostname;
+        let newChannel = newHostname.slice(
+          newHostname.indexOf('.') + 1,
+          newHostname.length,
+        );
+        let oldChannel = oldHostname.slice(
+          oldHostname.indexOf('.') + 1,
+          oldHostname.length,
+        );
+        if (openUrl.includes('youtube')) {
+          newChannel = 'youtube.com';
+        }
+        if (this.currentUrl.includes('youtube')) {
+          oldChannel = 'youtube.com';
+        }
+        if (oldChannel === newChannel) {
+          this.loadingState = true;
+          this.currentUrl = urlParseLax(openUrl).href;
+          this.$electron.ipcRenderer.send('create-browser-view', {
+            url: openUrl,
+            isNewWindow: true,
+          });
+        } else {
+          this.$electron.shell.openExternal(openUrl);
+        }
       }
     },
     pipAdapter() {
diff --git a/src/renderer/components/Sidebar.vue b/src/renderer/components/Sidebar.vue
index c872f15017..d436b10eb3 100644
--- a/src/renderer/components/Sidebar.vue
+++ b/src/renderer/components/Sidebar.vue
@@ -36,7 +36,7 @@ export default {
   },
   methods: {
     handleSidebarIcon(site: string) {
-      const url = `https://www.${site}.com`;
+      const url = `https://www.${site}.com/`;
 
       if (this.$route.name === 'browsing-view') {
         this.$bus.$emit('sidebar-selected', url);

From 4a241a96c7655f2bb15e662a9132a715de61085e Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Thu, 5 Sep 2019 13:57:37 +0800
Subject: [PATCH 065/123] fix(browsing): fix missing part of border

---
 src/renderer/components/BrowsingView.vue | 31 +++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index cbfe7241f4..66d1334a31 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -29,6 +29,12 @@
       }"
       v-show="maskToShow"
     />
+    <div
+      :style="{
+        width: `${progress}%`,
+      }"
+      class="progress"
+    />
     <NotificationBubble />
   </div>
 </template>
@@ -100,6 +106,7 @@ export default {
       isGlobal: false,
       startLoading: false,
       title: 'Splayer',
+      readyState: '',
     };
   },
   computed: {
@@ -136,6 +143,18 @@ export default {
     othersPip() {
       return globalPip(this.pipSize);
     },
+    progress() {
+      switch (this.readyState) {
+        case 'loading':
+          return 30; 
+        case 'interactive':
+          return 70;
+        case 'complete':
+          return 100;
+        default:
+          return 0;
+      }
+    },
   },
   watch: {
     showSidebar(val: boolean) {
@@ -986,11 +1005,12 @@ export default {
   position: absolute;
   right: 0;
   border-top-left-radius: 4px;
-  height: 100vh;
+  height: 39px;
   width: 100vw;
   display: flex;
   flex-direction: column;
   background: rgba(255, 255, 255, 1);
+  border-bottom: 1px solid #F2F1F4;
   .web-view {
     flex: 1;
     background: rgba(255, 255, 255, 1);
@@ -1025,6 +1045,15 @@ export default {
     z-index: 100;
   }
 }
+.progress {
+  position: absolute;
+  left: 0;
+  top: 38px;
+  z-index: 6;
+  height: 2px;
+  transition: width 100ms linear;
+  background-color: #FF672D;
+}
 .loading-animation {
   animation: loading 3s linear 1 normal forwards;
   animation-iteration-count: infinite;

From 39fabf3e76d2a6d6beff67574c26dda0cea9eb1d Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Thu, 5 Sep 2019 15:53:29 +0800
Subject: [PATCH 066/123] fix(browsing): height

---
 src/renderer/components/BrowsingView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 145d276e70..28cb29605f 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -1027,7 +1027,7 @@ export default {
   position: absolute;
   right: 0;
   border-top-left-radius: 4px;
-  height: 39px;
+  height: 100vh;
   width: 100vw;
   display: flex;
   flex-direction: column;

From 83cbcbaffea6dc50892123e962226cc9fffbc44c Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Thu, 5 Sep 2019 17:04:08 +0800
Subject: [PATCH 067/123] feat(browsing): add condition

---
 src/renderer/components/BrowsingView.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 28cb29605f..f915da67b0 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -293,10 +293,10 @@ export default {
         });
       } else {
         currentView.setBounds({
-          x: 0,
-          y: 36,
-          width: this.winSize[0],
-          height: this.winSize[1] - 36,
+          x: this.showSidebar ? 76 : 0,
+          y: 40,
+          width: this.showSidebar ? this.winSize[0] - 76 : this.winSize[0],
+          height: this.winSize[1] - 40,
         });
       }
     },

From e812ac4cd830db5d58ffa2beb3703cd84c6c4f72 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Thu, 5 Sep 2019 17:55:23 +0800
Subject: [PATCH 068/123] feat(browsing): new pip icon

---
 .../assets/icon/down-default-icon.svg         | 16 +++++-------
 src/renderer/components/BaseIconContainer.vue |  4 +--
 src/renderer/components/BrowsingView.vue      |  1 -
 .../BrowsingView/BrowsingPipControl.vue       | 25 +++++++++++++------
 4 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/renderer/assets/icon/down-default-icon.svg b/src/renderer/assets/icon/down-default-icon.svg
index e40f996959..8f01457df6 100644
--- a/src/renderer/assets/icon/down-default-icon.svg
+++ b/src/renderer/assets/icon/down-default-icon.svg
@@ -1,14 +1,10 @@
 
-<svg width="7px" height="5px" viewBox="0 0 7 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="各类图标的鼠标悬浮状态" transform="translate(-699.000000, -18.000000)" stroke="#B8BACC" stroke-width="1.4">
-            <g id="browserArea" transform="translate(76.000000, 0.000000)">
-                <g id="menuBar">
-                    <g id="button--pictureInPicture" transform="translate(590.000000, 5.000000)">
-                        <path d="M34.5,14.5 L36.0311146,16.0954996 C36.4135159,16.4939813 37.0465467,16.5070171 37.4450284,16.1246157 C37.4549326,16.1151112 37.46464,16.1054038 37.4741445,16.0954996 L39.0052592,14.5 L39.0052592,14.5" id="路径"></path>
-                    </g>
-                </g>
+<svg width="5px" height="7px" viewBox="0 0 5 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="菜单" transform="translate(-704.000000, -15.000000)" fill="#B8BACC" stroke="#B8BACC" stroke-width="0.9">
+            <g id="编组" transform="translate(702.000000, 8.000000)">
+                <polygon id="路径备份" transform="translate(4.500000, 10.000000) scale(-1, 1) translate(-4.500000, -10.000000) " points="6 7 3 10.2537709 6 13"></polygon>
             </g>
         </g>
     </g>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/components/BaseIconContainer.vue b/src/renderer/components/BaseIconContainer.vue
index e01c35ffb7..6da98db83d 100644
--- a/src/renderer/components/BaseIconContainer.vue
+++ b/src/renderer/components/BaseIconContainer.vue
@@ -558,8 +558,8 @@ screen and (min-aspect-ratio: 1/1) and (min-height: 1080px) {
   height: 16px;
 }
 .down {
-  width: 7px;
-  height: 5px;
+  width: 5px;
+  height: 7px;
 }
 .showMarks, .hideMarks, .closeSearch {
   width: 18px;
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index f915da67b0..35d0cff179 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -716,7 +716,6 @@ export default {
         .webContents.focus();
     },
     didStopLoading() {
-      this.startLoading = false;
       const loadingTime: number = new Date().getTime() - this.startTime;
       if (loadingTime % 3000 === 0) {
         this.loadingState = false;
diff --git a/src/renderer/components/BrowsingView/BrowsingPipControl.vue b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
index 1de8a66f34..b6c4f4fb93 100644
--- a/src/renderer/components/BrowsingView/BrowsingPipControl.vue
+++ b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
@@ -9,9 +9,14 @@
       <Icon
         :type="picInPicType"
       />
+    </div>
+    <div
+      @mouseup="switchPipType"
+      class="down-icon"
+    >
       <Icon
         type="down"
-        class="down-icon"
+        class="icon"
       />
     </div>
   </div>
@@ -48,19 +53,17 @@ export default {
 </script>
 <style lang="scss" scoped>
 .pip-control {
-  min-width: 62px;
+  min-width: 65px;
   z-index: 6;
   display: flex;
   width: 62px;
   height: 100%;
-  justify-content: center;
   align-items: center;
   border-left: 1px solid #F2F1F4;
   .pip-icon {
-    width: 46px;
+    width: 30px;
     height: 30px;
-    margin-right: 8px;
-    margin-left: 8px;
+    margin-left: 15px;
     border-radius: 15px;
     display: flex;
     justify-content: center;
@@ -71,7 +74,15 @@ export default {
     }
   }
   .down-icon {
-    margin-left: 5.5px;
+    width: 8px;
+    height: 20px;
+    margin-right: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .icon {
+      margin-top: 1px;
+    }
   }
 }
 </style>

From 05bc90ab1fc507abd4e9627b64be0a6428623d8a Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Thu, 5 Sep 2019 18:14:02 +0800
Subject: [PATCH 069/123] fix(browsingview): fix iqiyi can not login with third
 party

---
 src/main/helpers/BrowserViewManager.ts   |   1 +
 src/main/index.js                        |   2 +-
 src/main/menu/Menu.ts                    |   6 +-
 src/renderer/components/BrowsingView.vue | 170 +++++++----------------
 4 files changed, 52 insertions(+), 127 deletions(-)

diff --git a/src/main/helpers/BrowserViewManager.ts b/src/main/helpers/BrowserViewManager.ts
index ad70380ff8..a30ed1ee8f 100644
--- a/src/main/helpers/BrowserViewManager.ts
+++ b/src/main/helpers/BrowserViewManager.ts
@@ -61,6 +61,7 @@ export class BrowserViewManager implements IBrowserViewManager {
       view: new BrowserView({
         webPreferences: {
           preload: `${require('path').resolve(__static, 'pip/preload.js')}`,
+          nativeWindowOpen: true,
         },
       }),
     };
diff --git a/src/main/index.js b/src/main/index.js
index c79936006e..8813fc02e5 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -1199,7 +1199,7 @@ const oauthRegex = [
   /^https:\/\/account.xiaomi.com\/pass\//i,
 ];
 app.on('web-contents-created', (webContentsCreatedEvent, contents) => {
-  if (contents.getType() === 'webview') {
+  if (contents.getType() === 'browserView') {
     contents.on('new-window', (newWindowEvent, url) => {
       if (!oauthRegex.some(re => re.test(url))) {
         newWindowEvent.preventDefault();
diff --git a/src/main/menu/Menu.ts b/src/main/menu/Menu.ts
index 1a7e90ac97..239d18a033 100644
--- a/src/main/menu/Menu.ts
+++ b/src/main/menu/Menu.ts
@@ -65,9 +65,9 @@ export default class Menubar {
   public updateFocusedWindow(isMainWindow: boolean) {
     if (this.focusOnMainWindow !== isMainWindow) {
       if (!isMainWindow) {
-        this.updateMenuItemEnabled('browsing.history.back', false);
-        this.updateMenuItemEnabled('browsing.history.forward', false);
-        this.updateMenuItemEnabled('browsing.history.reload', false);
+        this.updateMenuItemEnabled('history.back', false);
+        this.updateMenuItemEnabled('history.forward', false);
+        this.updateMenuItemEnabled('history.reload', false);
         this.updateMenuItemEnabled('browsing.window.pip', true);
         this.updateMenuItemEnabled('browsing.window.keepPipFront', true);
         this.updateMenuItemLabel('browsing.window.pip', 'msg.window.exitPip');
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 145d276e70..8804fb4e3b 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -92,7 +92,6 @@ export default {
       pipBtnsKeepShow: false,
       asyncTasksDone: false,
       headerToShow: true,
-      pipRestore: false,
       acceleratorAvailable: true,
       oldDisplayId: -1,
       backToLandingView: false,
@@ -107,6 +106,16 @@ export default {
       startLoading: false,
       title: 'Splayer',
       readyState: '',
+      oauthRegex: [
+        /^https:\/\/cnpassport.youku.com\//i,
+        /^https:\/\/passport.iqiyi.com\/apis\/thirdparty/i,
+        /^https:\/\/api.weibo.com\/oauth2/i,
+        /^https:\/\/graph.qq.com\//i,
+        /^https:\/\/open.weixin.qq.com\//i,
+        /^https:\/\/openapi.baidu.com\//i,
+        /^https:\/\/auth.alipay.com\/login\//i,
+        /^https:\/\/account.xiaomi.com\/pass\//i,
+      ],
     };
   },
   computed: {
@@ -146,7 +155,7 @@ export default {
     progress() {
       switch (this.readyState) {
         case 'loading':
-          return 30; 
+          return 30;
         case 'interactive':
           return 70;
         case 'complete':
@@ -239,45 +248,8 @@ export default {
       }
     },
     loadingState(val: boolean) {
-      const loadUrl = this.$electron.remote
-        .getCurrentWindow()
-        .getBrowserViews()[0]
-        .webContents.getURL();
-      const hostname = urlParseLax(loadUrl).hostname;
-      let channel = hostname.slice(hostname.indexOf('.') + 1, hostname.length);
-      if (loadUrl.includes('youtube')) {
-        channel = 'youtube.com';
-      }
-      this.updateCanGoBack(
-        this.$electron.remote
-          .getCurrentWindow()
-          .getBrowserViews()[0]
-          .webContents.canGoBack(),
-      );
-      this.updateCanGoForward(
-        this.$electron.remote
-          .getCurrentWindow()
-          .getBrowserViews()[0]
-          .webContents.canGoForward(),
-      );
       if (val) {
         this.hasVideo = false;
-      } else {
-        if (this.pipRestore) {
-          this.pipAdapter();
-          this.pipRestore = false;
-        }
-        this.$electron.remote
-          .getCurrentWindow()
-          .getBrowserViews()[0]
-          .webContents.executeJavaScript(
-            this.calculateVideoNum,
-            (r: number) => {
-              this.hasVideo = channel === 'youtube.com' && !getVideoId(loadUrl).id
-                ? false
-                : !!r;
-            },
-          );
       }
     },
     headerToShow(val: boolean) {
@@ -324,7 +296,8 @@ export default {
     this.menuService = new MenuService();
     this.menuService.updateMenuItemEnabled('file.open', false);
 
-    this.title = this.$electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.getTitle();
+    this.title = this.$electron.remote.getCurrentWindow()
+      .getBrowserViews()[0].webContents.getTitle();
 
     this.$bus.$on('toggle-reload', this.handleUrlReload);
     this.$bus.$on('toggle-back', this.handleUrlBack);
@@ -670,30 +643,6 @@ export default {
           //   this.dropFiles = args.files;
           // }
           break;
-        case 'left-drag':
-          if (this.isPip) {
-            if (args.windowSize) {
-              this.$electron.ipcRenderer.send(
-                'callBrowsingWindowMethod',
-                'setBounds',
-                [
-                  {
-                    x: args.x,
-                    y: args.y,
-                    width: args.windowSize[0],
-                    height: args.windowSize[1],
-                  },
-                ],
-              );
-            } else {
-              this.$electron.ipcRenderer.send(
-                'callBrowsingWindowMethod',
-                'setPosition',
-                [args.x, args.y],
-              );
-            }
-          }
-          break;
         case 'fullscreenchange':
           if (!this.isPip) {
             this.headerToShow = !args.isFullScreen;
@@ -727,41 +676,40 @@ export default {
       }
     },
     handleOpenUrl({ url }: { url: string }) {
-      if (!this.startLoading) {
-        this.startLoading = true;
-        if (
-          !url
-          || url === 'about:blank'
-          || urlParseLax(url).href === urlParseLax(this.currentUrl).href
-        ) return;
-        const protocol = urlParseLax(url).protocol;
-        const openUrl = protocol ? url : `https:${url}`;
-        const newHostname = urlParseLax(openUrl).hostname;
-        const oldHostname = urlParseLax(this.currentUrl).hostname;
-        let newChannel = newHostname.slice(
-          newHostname.indexOf('.') + 1,
-          newHostname.length,
-        );
-        let oldChannel = oldHostname.slice(
-          oldHostname.indexOf('.') + 1,
-          oldHostname.length,
-        );
-        if (openUrl.includes('youtube')) {
-          newChannel = 'youtube.com';
-        }
-        if (this.currentUrl.includes('youtube')) {
-          oldChannel = 'youtube.com';
-        }
-        if (oldChannel === newChannel) {
-          this.loadingState = true;
-          this.currentUrl = urlParseLax(openUrl).href;
-          this.$electron.ipcRenderer.send('create-browser-view', {
-            url: openUrl,
-            isNewWindow: true,
-          });
-        } else {
-          this.$electron.shell.openExternal(openUrl);
-        }
+      this.startLoading = true;
+      const protocol = urlParseLax(url).protocol;
+      const openUrl = protocol ? url : `https:${url}`;
+      if (
+        !url
+        || url === 'about:blank'
+        || urlParseLax(openUrl).href === urlParseLax(this.currentUrl).href
+      ) return;
+      const newHostname = urlParseLax(openUrl).hostname;
+      const oldHostname = urlParseLax(this.currentUrl).hostname;
+      let newChannel = newHostname.slice(
+        newHostname.indexOf('.') + 1,
+        newHostname.length,
+      );
+      let oldChannel = oldHostname.slice(
+        oldHostname.indexOf('.') + 1,
+        oldHostname.length,
+      );
+      if (openUrl.includes('youtube')) {
+        newChannel = 'youtube.com';
+      }
+      if (this.currentUrl.includes('youtube')) {
+        oldChannel = 'youtube.com';
+      }
+      if (this.oauthRegex.some((re: RegExp) => re.test(url))) return;
+      if (oldChannel === newChannel) {
+        this.loadingState = true;
+        this.currentUrl = urlParseLax(openUrl).href;
+        this.$electron.ipcRenderer.send('create-browser-view', {
+          url: openUrl,
+          isNewWindow: true,
+        });
+      } else {
+        this.$electron.shell.openExternal(openUrl);
       }
     },
     pipAdapter() {
@@ -871,7 +819,6 @@ export default {
     },
     handleUrlReload() {
       if (this.isPip) {
-        this.pipRestore = true;
         this.$electron.remote
           .getCurrentWindow()
           .getBrowserViews()[0]
@@ -917,29 +864,6 @@ export default {
       if (this.isPip) {
         this.exitPipOperation();
         this.updateIsPip(false);
-        const loadUrl = this.$electron.remote
-          .getCurrentWindow()
-          .getBrowserViews()[0]
-          .webContents.getURL();
-        const hostname = urlParseLax(loadUrl).hostname;
-        let channel = hostname.slice(
-          hostname.indexOf('.') + 1,
-          hostname.length,
-        );
-        if (loadUrl.includes('youtube')) {
-          channel = 'youtube.com';
-        }
-        this.$electron.remote
-          .getCurrentWindow()
-          .getBrowserViews()[0]
-          .webContents.executeJavaScript(
-            this.calculateVideoNum,
-            (r: number) => {
-              this.hasVideo = channel === 'youtube.com' && !getVideoId(loadUrl).id
-                ? false
-                : !!r;
-            },
-          );
       }
     },
     othersAdapter() {

From a1b0fb4d9d35b3f424c7fcabb6844c04c86d4e03 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Thu, 5 Sep 2019 19:01:04 +0800
Subject: [PATCH 070/123] feat(sidebar): adjust sidebaricon

---
 src/renderer/App.vue                          |   4 +
 src/renderer/components/BrowsingView.vue      |   3 +
 .../LandingView/BilibiliSidebarIcon.vue       | 132 ++++++++++-------
 .../LandingView/YoutubeSidebarIcon.vue        | 139 +++++++++++-------
 .../LandingView/iQiyiSidebarIcon.vue          |  26 +++-
 src/renderer/components/Sidebar.vue           |  32 ++--
 6 files changed, 214 insertions(+), 122 deletions(-)

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index f3c91bb7da..cda903af73 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -16,6 +16,7 @@
       <Sidebar
         v-if="showSidebar"
         :show-sidebar="showSidebar"
+        :current-url="currentUrl"
       />
     </transition>
     <transition
@@ -28,6 +29,7 @@
         }"
         :open-file-args="openFileArgs"
         :show-sidebar="showSidebar"
+        @update-current-url="currentUrl = $event"
       />
     </transition>
   </div>
@@ -52,6 +54,7 @@ export default {
       transitionMode: '',
       openFileArgs: null,
       showSidebar: false,
+      currentUrl: '',
     };
   },
   watch: {
@@ -59,6 +62,7 @@ export default {
       if (to.name === 'landing-view' && from.name === 'language-setting') this.transitionMode = 'fade';
       else this.transitionMode = '';
       if (to.name !== 'browsing-view' && !(to.name === 'landing-view' && from.name === 'browsing-view')) this.showSidebar = false;
+      if (from.name === 'browsing-view' && to.name === 'landing-view') this.currentUrl = '';
     },
     showSidebar(val: boolean) {
       ipcRenderer.send('update-sidebar', val);
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 35d0cff179..37027fefe8 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -157,6 +157,9 @@ export default {
     },
   },
   watch: {
+    currentUrl(val: string) {
+      this.$emit('update-current-url', val);
+    },
     showSidebar(val: boolean) {
       const browserView = this.$electron.remote.getCurrentWindow().getBrowserViews()[0];
       if (!val) {
diff --git a/src/renderer/components/LandingView/BilibiliSidebarIcon.vue b/src/renderer/components/LandingView/BilibiliSidebarIcon.vue
index 1c5c6a6035..3b28c86f23 100644
--- a/src/renderer/components/LandingView/BilibiliSidebarIcon.vue
+++ b/src/renderer/components/LandingView/BilibiliSidebarIcon.vue
@@ -1,81 +1,107 @@
 <template>
-  <svg
-    width="42px"
-    height="42px"
-    viewBox="0 0 42 42"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
+  <div 
+    @mouseover="mouseover === true"
+    @mouseout="mouseover === false"
+    @mouseup="mouseupOnIcon(url)"
   >
-    <defs>
-      <circle
-        id="path-1"
-        cx="20"
-        cy="20"
-        r="20"
-      />
-    </defs>
-    <g
-      id="LandingView"
-      stroke="none"
-      stroke-width="1"
-      fill="none"
-      fill-rule="evenodd"
+    <svg
+      width="42px"
+      height="42px"
+      viewBox="0 0 42 42"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
     >
+      <defs>
+        <circle
+          id="path-1"
+          cx="20"
+          cy="20"
+          r="20"
+        />
+      </defs>
       <g
-        id="2"
-        transform="translate(-17.000000, -45.000000)"
+        id="LandingView"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd"
       >
         <g
-          id="sideBarItems"
-          transform="translate(18.000000, 46.000000)"
+          id="2"
+          transform="translate(-17.000000, -45.000000)"
         >
           <g
-            id="sideBarItem--bilibili"
-            class="sidebar"
+            id="sideBarItems"
+            transform="translate(18.000000, 46.000000)"
           >
-            <mask
-              id="mask-2"
-              fill="white"
-            >
-              <use xlink:href="#path-1" />
-            </mask>
-            <circle
-              stroke="#EBECF0"
-              fill="#20B0E3"
-              stroke-width="1"
-              cx="20"
-              cy="20"
-              r="20.5"
-            />
             <g
-              id="logo--bilibili"
-              stroke-width="1"
-              fill-rule="evenodd"
-              mask="url(#mask-2)"
-              fill="#FFFFFF"
+              id="sideBarItem--bilibili"
+              :style="{
+                opcaity: mouseover ? '1.0' : '0.7',
+              }"
             >
+              <mask
+                id="mask-2"
+                fill="white"
+              >
+                <use xlink:href="#path-1" />
+              </mask>
+              <circle
+                stroke="#EBECF0"
+                fill="#20B0E3"
+                :stroke-width="selected ? 2 : 0"
+                cx="20"
+                cy="20"
+                r="20.5"
+              />
               <g
-                id="形状"
-                transform="translate(10.000000, 10.000000)"
-                fill-rule="nonzero"
+                id="logo--bilibili"
+                stroke-width="1"
+                fill-rule="evenodd"
+                mask="url(#mask-2)"
+                fill="#FFFFFF"
               >
-                <path :d="d1" />
-                <path :d="d2" />
+                <g
+                  id="形状"
+                  transform="translate(10.000000, 10.000000)"
+                  fill-rule="nonzero"
+                >
+                  <path :d="d1" />
+                  <path :d="d2" />
+                </g>
               </g>
             </g>
           </g>
         </g>
       </g>
-    </g>
-  </svg>
+    </svg>
+  </div>
 </template>
 <script lang="ts">
+import { log } from '@/libs/Log';
 export default {
+  props: {
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+    url: {
+      type: String,
+      default: '',
+    },
+    mouseupOnIcon: {
+      type: Function,
+      default: () => {
+        log.debug('BilibiliSidebarIcon.vue', 'mouse up on button');
+      },
+    },  
+  },
   data() {
     return {
       d1: 'M4.16311913,0.136856551 C4.54706993,-0.0456188504 4.99134115,-0.0456188504 5.37529196,0.136856551 C5.64911676,0.279622341 5.89930343,0.464687896 6.11685652,0.685399187 L8.96902792,3.2115824 L11.0083305,3.2115824 L13.8605018,0.685399187 C14.0783549,0.465042255 14.328484,0.280019249 14.6020664,0.136856551 C15.0123291,-0.0114232883 15.4670459,0.0382423441 15.836616,0.271698057 C16.2061862,0.505153769 16.4500711,0.896791525 16.4987604,1.33498915 C16.513676,1.6852461 16.4021569,2.02902758 16.1850215,2.30215644 C15.986131,2.50576009 15.7766755,2.69850382 15.5575438,2.87956975 C15.4314345,2.99858633 15.2980711,3.10947511 15.1582398,3.2115824 L16.9408469,3.2115824 C17.7362729,3.23749039 18.4895277,3.57982413 19.0371929,4.16431436 C19.6186036,4.71720364 19.9618087,5.47941841 19.9926703,6.28630826 L19.9926703,14.5866246 C20.0135941,15.0066267 19.9896877,15.4276882 19.921366,15.8424985 C19.73369,16.6827947 19.2196798,17.4112132 18.4952803,17.8634451 C18.0026469,18.1710274 17.4340638,18.3311775 16.8552818,18.3253757 L3.76381512,18.3253757 C3.33467114,18.3475484 2.90441473,18.3233528 2.480338,18.2531991 C1.66006278,18.0576987 0.951300008,17.5378188 0.512339743,16.8096658 C0.197719719,16.314396 0.0294905494,15.738424 0.0274706222,15.1496025 L0.0274706222,6.93589824 C-0.00915687408,6.53738117 -0.00915687408,6.1362827 0.0274706222,5.73776563 C0.294623168,4.32686089 1.46420942,3.27319376 2.879642,3.16827641 L4.74781426,3.16827641 C4.44833627,2.95174642 4.19164084,2.69191043 3.92068456,2.46094511 C3.59596859,2.15900768 3.42749336,1.722008 3.46433714,1.27724783 C3.49794529,0.803968079 3.7591861,0.377630895 4.16311913,0.136856551 L4.16311913,0.136856551 Z M3.83511942,5.73776563 C3.29282475,5.83495122 2.85428204,6.23952569 2.70851171,6.77710958 C2.68296149,6.95904258 2.68296149,7.14371921 2.70851171,7.32565221 L2.70851171,14.1535646 C2.67704938,14.8043975 3.08023736,15.395877 3.69251085,15.5970978 C3.88997647,15.6649278 4.09720389,15.699172 4.3057277,15.6981452 L15.8998044,15.6981452 C16.4806719,15.7202669 17.0166726,15.3833095 17.2545858,14.8464605 C17.3773175,14.545168 17.4262444,14.2182997 17.3971944,13.8937286 L17.3971944,7.54218222 C17.4299586,7.31240746 17.4299586,7.07906099 17.3971944,6.84928623 C17.2690268,6.38622012 16.9214635,6.01816692 16.4702387,5.86768362 C16.1867619,5.76619092 15.8863509,5.72204935 15.5860655,5.73776563 L4.50537969,5.73776563 C4.28223679,5.72183388 4.05826232,5.72183388 3.83511942,5.73776563 Z',
       d2: 'M6.3504652,8.11884087 C6.71823296,8.10027292 7.07953194,8.22070592 7.36260538,8.45622093 C7.68078035,8.7282213 7.86759315,9.12319693 7.87600982,9.54170461 L7.87600982,11.0085744 C7.88917306,11.345944 7.78555343,11.6775268 7.58263585,11.9473711 C7.28049873,12.3220804 6.81375082,12.5247135 6.33368834,12.489587 C5.85362585,12.4544604 5.42134493,12.1860447 5.17696933,11.7713467 C5.02441204,11.4622053 4.95851064,11.1174902 4.98627626,10.7738752 L4.98627626,9.30700543 C5.08698788,8.65645051 5.60876577,8.15266497 6.262453,8.07483477 L6.3504652,8.11884087 Z M13.9341822,8.11884087 C14.3258341,8.09070653 14.7124155,8.22077048 15.0074102,8.47992469 C15.3024049,8.7390789 15.4811825,9.10568544 15.5037329,9.4976985 L15.5037329,10.9645683 C15.527372,11.3019095 15.450825,11.6387162 15.2837025,11.9327024 C15.0102269,12.3319314 14.5574487,12.5705961 14.0735348,12.5705961 C13.589621,12.5705961 13.1368428,12.3319314 12.8633672,11.9327024 C12.6782874,11.6185733 12.5962147,11.2543755 12.6286681,10.8912248 L12.6286681,9.42435502 C12.7047908,8.75093189 13.2323356,8.21732338 13.9048448,8.13350957 L13.9341822,8.11884087 Z',
+      mouseover: false,
     };
   },
 };
diff --git a/src/renderer/components/LandingView/YoutubeSidebarIcon.vue b/src/renderer/components/LandingView/YoutubeSidebarIcon.vue
index 0d00fa76d7..b2bfa4ee73 100644
--- a/src/renderer/components/LandingView/YoutubeSidebarIcon.vue
+++ b/src/renderer/components/LandingView/YoutubeSidebarIcon.vue
@@ -1,80 +1,107 @@
 <template>
-  <svg
-    width="42px"
-    height="42px"
-    viewBox="0 0 42 42"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
+  <div 
+    @mouseover="mouseover === true"
+    @mouseout="mouseover === false"
+    @mouseup="mouseupOnIcon(url)"
   >
-    <defs>
-      <circle
-        id="path-1"
-        cx="20"
-        cy="20"
-        r="20"
-      />
-    </defs>
-    <g
-      id="页面-1"
-      stroke="none"
-      stroke-width="1"
-      fill="none"
-      fill-rule="evenodd"
+   <svg
+      width="42px"
+      height="42px"
+      viewBox="0 0 42 42"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
     >
+      <defs>
+        <circle
+          id="path-1"
+          cx="20"
+          cy="20"
+          r="20"
+        />
+      </defs>
       <g
-        id="2"
-        transform="translate(-17.000000, -157.000000)"
+        id="页面-1"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd"
       >
         <g
-          id="sideBarItems"
-          transform="translate(18.000000, 46.000000)"
+          id="2"
+          transform="translate(-17.000000, -157.000000)"
         >
           <g
-            id="sideBarItem--youtube"
-            class="sidebar"
-            transform="translate(0.000000, 112.000000)"
+            id="sideBarItems"
+            transform="translate(18.000000, 46.000000)"
           >
-            <mask
-              id="mask-2"
-              fill="white"
-            >
-              <use xlink:href="#path-1" />
-            </mask>
-            <circle
-              stroke="#EBECF0"
-              fill="#FF0000"
-              stroke-width="1"
-              cx="20"
-              cy="20"
-              r="20.5"
-            />
             <g
-              id="logo--youtube"
-              stroke-width="1"
-              fill-rule="evenodd"
-              mask="url(#mask-2)"
+              id="sideBarItem--youtube"
+              class="sidebar"
+              transform="translate(0.000000, 112.000000)"
             >
+              <mask
+                id="mask-2"
+                fill="white"
+              >
+                <use xlink:href="#path-1" />
+              </mask>
+              <circle
+                stroke="#EBECF0"
+                fill="#FF0000"
+                :stroke-width="selected ? 2 : 0"
+                cx="20"
+                cy="20"
+                r="20.5"
+              />
               <g
-                id="路径"
-                transform="translate(-2.376364, 4.000000)"
-                fill-rule="nonzero"
+                id="logo--youtube"
+                stroke-width="1"
+                fill-rule="evenodd"
+                mask="url(#mask-2)"
               >
-                <polygon
-                  fill="#FFFFFF"
-                  points="18.2909091 22.8581818 30.1672727 16 18.2909091 9.14181818"
-                />
+                <g
+                  id="路径"
+                  transform="translate(-2.376364, 4.000000)"
+                  fill-rule="nonzero"
+                >
+                  <polygon
+                    fill="#FFFFFF"
+                    points="18.2909091 22.8581818 30.1672727 16 18.2909091 9.14181818"
+                  />
+                </g>
               </g>
             </g>
           </g>
         </g>
       </g>
-    </g>
-  </svg>
+    </svg>
+  </div>
 </template>
 <script lang="ts">
+import { log } from '@/libs/Log';
 export default {
-
+  props: {
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+    url: {
+      type: String,
+      default: '',
+    },
+    mouseupOnIcon: {
+      type: Function,
+      default: () => {
+        log.debug('YoutubeSidebarIcon.vue', 'mouse up on button');
+      },
+    },
+  },
+  data() {
+    return {
+      mouseover: false,
+    };
+  },
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/renderer/components/LandingView/iQiyiSidebarIcon.vue b/src/renderer/components/LandingView/iQiyiSidebarIcon.vue
index 64299aec60..d9391ff285 100644
--- a/src/renderer/components/LandingView/iQiyiSidebarIcon.vue
+++ b/src/renderer/components/LandingView/iQiyiSidebarIcon.vue
@@ -1,4 +1,9 @@
 <template>
+  <div 
+    @mouseover="mouseover === true"
+    @mouseout="mouseover === false"
+    @mouseup="mouseupOnIcon(url)"
+  >
   <svg
     width="42px"
     height="42px"
@@ -44,7 +49,7 @@
             <circle
               stroke="#EBECF0"
               fill="#42BD56"
-              stroke-width="1"
+              :stroke-width="selected ? 2 : 0"
               cx="20"
               cy="20"
               r="20.5"
@@ -69,12 +74,31 @@
       </g>
     </g>
   </svg>
+  </div>
 </template>
 <script lang="ts">
+import { log } from '@/libs/Log';
 export default {
+  props: {
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+    url: {
+      type: String,
+      default: '',
+    },
+    mouseupOnIcon: {
+      type: Function,
+      default: () => {
+        log.debug('iQiyiSidebarIcon.vue', 'mouse up on button');
+      },
+    },
+  },
   data() {
     return {
       d1: 'M12.1007843,19.7177177 C8.93136388,19.7923624 5.76235941,19.5522521 2.64036834,19.0009177 C1.11716833,18.7177817 0.221168343,17.6891737 0.265968352,16.2582617 C0.265968352,15.8550617 0.415152352,15.6471897 0.833136352,15.6471897 L1.80305634,15.6471897 C2.16161589,15.5913355 2.50391702,15.8170797 2.59377635,16.1686617 C2.75245575,16.7008355 3.23273895,17.072627 3.78769633,17.0928857 C5.22129633,17.3168857 6.66744033,17.4960857 8.11492835,17.5856857 C10.4055188,17.7347583 12.7033779,17.7347583 14.9939683,17.5856857 C16.6515683,17.4665177 18.3064803,17.3168857 19.9479523,17.0637657 C20.3634144,17.0488524 20.720525,16.7646179 20.8282723,16.3630937 C20.9774563,15.7072217 21.4106723,15.6328537 21.9773923,15.6328537 C23.4396643,15.6476377 23.4844643,15.6924377 23.1112804,17.0785497 C22.9416594,17.9232722 22.313905,18.6022154 21.4850404,18.8373977 C20.0583739,19.2071252 18.5990513,19.4368417 17.1277924,19.5232857 C15.4588274,19.7148172 13.7777412,19.7795146 12.0989923,19.7168217 L12.1007843,19.7177177 Z M12.1308004,0.742677703 C14.9202733,0.64295077 17.7123012,0.847853716 20.4573283,1.35374972 C22.1436003,1.62254972 22.9491043,2.03918972 23.3075044,4.0368217 C23.3971043,4.5582937 23.1883364,4.78184571 22.6803043,4.76706171 C22.3667043,4.75227771 22.0235363,4.7074777 21.6947044,4.7074777 C21.3345326,4.74815209 20.9986168,4.51976743 20.9039843,4.1698777 C20.7119745,3.67750091 20.2526078,3.34052718 19.7252963,3.30523772 C16.3623322,2.80883541 12.960695,2.62422138 9.56376035,2.75374971 C7.60913634,2.8581337 5.63928035,3.12648572 3.68465634,3.32002172 C3.22216643,3.33764128 2.81567453,3.63172932 2.65425635,4.06549371 C2.59993404,4.29580613 2.45566494,4.4947833 2.25365131,4.61801162 C2.05163768,4.74123993 1.80869714,4.77846064 1.57905635,4.72136571 C1.34607399,4.69648633 1.11174433,4.68646073 0.877488352,4.6913497 C0.429488343,4.7061337 0.265520343,4.49736569 0.265520343,4.0502617 C0.233489855,2.85528609 1.05312288,1.80533674 2.22014435,1.5463897 C5.47712416,0.871528334 8.80486846,0.600686422 12.1281124,0.739989703 L12.1308004,0.742677703 Z M9.56420833,10.2676057 L9.56420833,13.0698457 C9.54982558,13.3963473 9.50482823,13.7207782 9.42980833,14.0388697 C9.34020834,14.4420697 8.71300833,14.8734937 9.59422434,15.1714137 C9.80299235,15.2462297 9.74340834,15.6781017 9.66859235,15.9612377 C9.58849772,16.1962252 9.34302803,16.3319509 9.10142435,16.2748377 C8.44510434,16.2300377 7.71262434,16.3196377 7.29598434,15.5893977 C7.17356617,15.4096621 6.95835011,15.3168033 6.74360034,15.3510617 C6.50918141,15.3509711 6.27500437,15.3360077 6.04248035,15.3062617 C3.87864035,14.9926617 3.62328035,14.6951897 3.62328035,12.5335897 L3.62328035,7.06261371 C3.62328035,6.09358971 3.99646434,5.61646971 4.92248034,5.31854972 C6.04659197,4.95781128 7.25842017,4.97875917 8.36939233,5.3781337 C9.16011234,5.6469337 9.50328033,6.15317369 9.53419235,7.09218171 C9.57899236,8.16738171 9.56420836,9.22376571 9.56420833,10.2671577 L9.56420833,10.2676057 Z M7.18980834,10.2528217 L7.18980834,7.24181372 C7.18980834,6.82427773 7.11499235,6.4963417 6.59307234,6.4963417 C6.10027235,6.4963417 5.93630435,6.73512569 5.93630435,7.19701371 L5.93630435,13.2190297 C5.93630435,13.6670297 6.07070435,14.0388697 6.57784033,14.0388697 C7.08497632,14.0388697 7.17457633,13.6213337 7.17457633,13.2042457 C7.18980834,12.2186457 7.17457633,11.2366297 7.18980834,10.2528217 Z M16.9933924,8.55355772 C17.2917604,7.61275772 17.5453283,6.88430972 17.7393124,6.1536217 C17.7699398,5.91166461 17.8960975,5.69201818 18.089662,5.5436468 C18.2832264,5.39527542 18.5281064,5.33051339 18.7697123,5.36379771 C20.5751524,5.36379771 20.3377123,5.4681817 19.8449123,6.82472571 C19.4121443,8.01730172 19.0541923,9.2246617 18.5457124,10.3724377 C18.0372324,11.5202137 18.2025443,12.7571417 18.1425124,13.9497177 C18.1277284,14.3529177 18.3069284,14.8739417 17.7993443,15.0526937 C17.2333643,15.1963618 16.638155,15.1756926 16.0835044,14.9931097 C15.9491044,14.9630937 15.9043043,14.7843417 15.8895203,14.6503897 L15.8895203,14.5159897 C16.3222883,11.5497817 14.8300003,9.03067769 13.9944803,6.36238971 C13.7108963,5.4829657 13.7556964,5.39336571 14.6664803,5.3767897 C14.8752484,5.3767897 15.0844643,5.3915737 15.2936803,5.3767897 C15.5027718,5.33146844 15.721274,5.37700021 15.8948603,5.50206435 C16.0684466,5.6271285 16.1808111,5.81997706 16.2040163,6.0326617 C16.4127844,6.80770169 16.6815844,7.56795771 16.9947364,8.55176571 L16.9933924,8.55355772 Z M23.3800804,10.2976217 L23.3800804,14.2924377 C23.3800804,14.8300377 23.2308964,15.0988377 22.6184803,15.1122777 C21.0813923,15.1422937 21.0813923,15.1570777 21.0813923,13.6069977 C21.0813923,11.1627097 21.0961763,8.70318973 21.0813923,6.2436697 C21.0813923,5.5716697 21.3201763,5.34766971 21.9773923,5.36424572 C23.3661923,5.39426173 23.3661923,5.36424572 23.3661923,6.7207897 L23.3800804,10.2976217 Z M12.9945443,10.3124057 C12.9945443,11.6837337 12.9797603,13.0698457 12.9945443,14.4411737 C12.9945443,14.9030617 12.8453603,15.0683737 12.3978083,15.0970457 C10.6819684,15.2162137 10.6819684,15.2314457 10.6819684,13.5169497 L10.6819684,6.3780697 C10.6819684,5.4372697 10.7415524,5.3794777 11.6675683,5.3646937 C11.8063525,5.37951282 11.9463201,5.37951282 12.0851044,5.3646937 C12.7571044,5.29032569 12.9954404,5.57346171 12.9811043,6.24411771 C12.9363043,7.60066172 12.9663203,8.95675772 12.9663203,10.2985177 L12.9945443,10.3124057 Z M2.44504033,11.6537177 L2.44504033,14.3815897 C2.44504033,14.8882777 2.23627233,15.0822617 1.74347233,15.0983897 C0.281200334,15.1579737 0.281200334,15.1727577 0.281200334,13.6822617 C0.281200334,12.1469657 0.295984334,10.6116697 0.281200334,9.06158972 C0.281200334,8.49531771 0.475184343,8.27176573 1.05713634,8.2717657 C2.72817635,8.2717657 2.45982433,8.16738171 2.45982433,9.6130777 L2.44504033,11.6537177 Z M2.44504033,6.4963417 C2.44504033,7.6441177 2.44504033,7.6441177 1.41464034,7.6441177 C0.265520343,7.6441177 0.265520343,7.6441177 0.280752352,6.47931771 C0.280752352,5.37634172 0.280752352,5.37634172 1.41464034,5.37634172 C2.42936034,5.37634172 2.42936034,5.37634172 2.44504033,6.4963417 L2.44504033,6.4963417 Z',
+      mouseover: false,
     };
   },
 };
diff --git a/src/renderer/components/Sidebar.vue b/src/renderer/components/Sidebar.vue
index d436b10eb3..4db82e157c 100644
--- a/src/renderer/components/Sidebar.vue
+++ b/src/renderer/components/Sidebar.vue
@@ -3,15 +3,21 @@
     class="side-bar"
   >
     <div class="icon-box">
-      <div @mouseup="handleSidebarIcon('bilibili')">
-        <BilibiliSidebarIcon />
-      </div>
-      <div @mouseup="handleSidebarIcon('iqiyi')">
-        <iQiyiSidebarIcon />
-      </div>
-      <div @mouseup="handleSidebarIcon('youtube')">
-        <YoutubeSidebarIcon />
-      </div>
+      <BilibiliSidebarIcon
+        :selected="currentUrl.startsWith('https://www.bilibili.com/')"
+        :url="'https://www.bilibili.com/'"
+        :mouseup-on-icon="handleSidebarIcon"
+      />
+      <iQiyiSidebarIcon
+        :selected="currentUrl.startsWith('https://www.iqiyi.com/')"
+        :url="'https://www.iqiyi.com/'"
+        :mouseup-on-icon="handleSidebarIcon"
+      />
+      <YoutubeSidebarIcon
+        :selected="currentUrl.startsWith('https://www.youtube.com/')"
+        :url="'https://www.youtube.com/'"
+        :mouseup-on-icon="handleSidebarIcon"
+      />
     </div>
   </div>
 </template>
@@ -33,11 +39,13 @@ export default {
       type: Boolean,
       default: false,
     },
+    currentUrl: {
+      type: String,
+      default: '',
+    },
   },
   methods: {
-    handleSidebarIcon(site: string) {
-      const url = `https://www.${site}.com/`;
-
+    handleSidebarIcon(url: string) {
       if (this.$route.name === 'browsing-view') {
         this.$bus.$emit('sidebar-selected', url);
       } else {

From 292aadbf18e208e2dfd32406000076acb7e0b99b Mon Sep 17 00:00:00 2001
From: Yan Yifeng <yanyifeng@splayer.org>
Date: Wed, 4 Sep 2019 18:24:10 +0800
Subject: [PATCH 071/123] refactor(subtitle): refactor subtitle parsers

Reimplement subtitle parsers according to new IParser interface.

1. Reimplement all parsers.
2. Remove base parser.
3. Add getDialogues and fix getParser in subtitle utils.
4. Fix srt, vtt and ass parser's problem.
---
 src/renderer/services/subtitle/parsers/ass.ts | 204 ++++++++++--------
 .../services/subtitle/parsers/base.ts         |  91 --------
 .../services/subtitle/parsers/sagi.ts         |  36 ++--
 src/renderer/services/subtitle/parsers/srt.ts |  53 +++--
 src/renderer/services/subtitle/parsers/vtt.ts |  72 +++----
 src/renderer/services/subtitle/utils/index.ts |  31 ++-
 6 files changed, 229 insertions(+), 258 deletions(-)
 delete mode 100644 src/renderer/services/subtitle/parsers/base.ts

diff --git a/src/renderer/services/subtitle/parsers/ass.ts b/src/renderer/services/subtitle/parsers/ass.ts
index 5eba6820a8..e76926811a 100644
--- a/src/renderer/services/subtitle/parsers/ass.ts
+++ b/src/renderer/services/subtitle/parsers/ass.ts
@@ -1,47 +1,34 @@
-import { pick } from 'lodash';
-// @ts-ignore
-import { compile } from 'ass-compiler';
-import { Format, Cue, ITags } from '@/interfaces/ISubtitle';
-import { BaseParser } from './base';
-
-interface IAssTags {
-  b: number;
-  i: number;
-  u: number;
-  s: number;
-}
-type CompiledSubtitle = {
-  info: {
-    PlayResX: string;
-    PlayResY: string;
-  };
-  dialogues: {
-    start: number;
-    end: number;
-    alignment: number;
-    pos: {
-      x: number;
-      y: number;
-    };
-    slices: {
-      tag: IAssTags;
-      fragments: {
-        tag: IAssTags;
-        text: string;
-        drawing: null | object;
-      }[];
-    }[];
-  }[];
-}
+import { pick, get } from 'lodash';
+import { compile, CompiledASS, AssStream } from 'ass-compiler';
+import {
+  Format, IParser, ILoader, IMetadata, Cue, IVideoSegments,
+} from '@/interfaces/ISubtitle';
+import { getDialogues } from '../utils';
+import { StreamTimeSegments } from '@/libs/TimeSegments';
 
-export class AssParser extends BaseParser {
-  public readonly payload: string = '';
+export class AssParser implements IParser {
+  public get format() { return Format.AdvancedSubStationAplha; }
 
-  public format = Format.AdvancedSubStationAplha;
+  public readonly loader: ILoader;
 
-  public constructor(assPayload: string) {
-    super();
-    this.payload = assPayload;
+  public readonly videoSegments: IVideoSegments;
+
+  public constructor(assPayload: ILoader, videoSegments: IVideoSegments) {
+    this.loader = assPayload;
+    this.videoSegments = videoSegments;
+    this.loader.once('read', (result) => {
+      if (result) {
+        this.loader.getPayload()
+          .then((payload) => {
+            this.dialogues = [];
+            this.normalize(compile(payload as string));
+            // some clean up
+            if (this.timer) clearTimeout(this.timer);
+            this.assStream = undefined;
+            this.timeSegments = undefined;
+          });
+      }
+    });
   }
 
   private baseInfo = {
@@ -83,62 +70,105 @@ export class AssParser extends BaseParser {
     // yshad: 2,
     // q: 0,
     alignment: 2,
-    pos: null,
+    pos: undefined,
   };
 
-  private normalize(compiledSubtitle: CompiledSubtitle) {
-    if (!compiledSubtitle.dialogues.length) throw new Error('Unsupported Subtitle');
-    const finalDialogues: Cue[] = [];
+  private metadata: IMetadata;
+
+  private dialogues: Cue[] = [];
+
+  private normalize(compiledSubtitle: CompiledASS) {
+    if (!compiledSubtitle.dialogues.length) return;
     const { info, dialogues } = compiledSubtitle;
     this.metadata = pick(info, Object.keys(this.baseInfo));
-    dialogues.forEach((dialogue) => {
+    this.dialogues = dialogues.map((dialogue) => {
       const {
         start, end, alignment, slices, pos,
       } = dialogue;
-      const baseDiagolue = {
-        start, end,
+      const finalText = slices
+        .reduce(
+          (prevSliceString, { fragments }) => prevSliceString.concat(fragments
+            .reduce(
+              (prevFragmentString, { text }) => prevFragmentString.concat(text
+                // replace soft and hard line breaks with \n
+                .replace(/[\\/][Nn]|\r?\n|\r/g, '\n')
+                // replace hard space with space
+                .replace(/\\h/g, ' ')),
+              '',
+            )),
+          '',
+        );
+      const finalTags = {
+        ...this.baseTags,
+        alignment,
+        pos,
+        ...pick(
+          Object.assign({},
+            get(slices, '[0].tag'),
+            get(slices, '[0].fragments[0].tag')),
+          ['b', 'i', 'u', 's'],
+        ),
+      };
+      return {
+        start,
+        end,
+        text: finalText,
+        tags: finalTags,
+        format: Format.AdvancedSubStationAplha,
       };
-      Object.values(slices).forEach((slice) => {
-        const { tag: sliceTag, fragments } = slice;
-        const hasDrawing = fragments.some(({ drawing }) => !!drawing);
-        if (!hasDrawing) {
-          const processedFragments = fragments.map((fragment) => {
-            const { tag: fragmentTag, text } = fragment;
-            const finalTags = {
-              ...this.baseTags,
-              alignment,
-              pos,
-              ...pick(Object.assign({}, sliceTag, fragmentTag), ['b', 'i', 'u', 's']),
-            };
-            return {
-              text: text
-                .replace(/[\\/][Nn]|\r?\n|\r/g, '\n') // replace soft and hard line breaks with \n
-                .replace(/\\h/g, ' '), // replace hard space with space
-              tags: finalTags,
-            };
-          });
-          let txt = '';
-          let tags: ITags = {};
-          processedFragments.forEach((f: { text: string, tags: ITags }, i: number) => {
-            if (i === 0) {
-              tags = f.tags;
-            }
-            txt += f.text;
-          });
-          const finalDialogue = {
-            ...baseDiagolue,
-            text: txt,
-            tags,
-            format: this.format,
-          };
-          finalDialogues.push(finalDialogue);
-        }
-      });
     });
-    this.dialogues = finalDialogues;
+    this.dialogues.forEach(({ start, end }) => this.videoSegments.insert(start, end));
   }
 
-  public async parse() {
-    this.normalize(compile(this.payload) as CompiledSubtitle);
+  public async getMetadata() { return this.metadata; }
+
+  private assStream?: AssStream;
+
+  private timeSegments?: StreamTimeSegments;
+
+  private timer?: NodeJS.Timeout;
+
+  private timeout: boolean = true;
+
+  private currentTime?: number;
+
+  private isRequesting: boolean = false;
+
+  private get canRequestPayload() {
+    return !this.loader.canPreload && !this.isRequesting && (
+      (this.timeSegments && !this.timeSegments.check(this.currentTime || 0)) || this.timeout
+    );
+  }
+
+  private lastLines: string[] = [];
+
+  public async getDialogues(time?: number) {
+    if (this.loader.canPreload) {
+      if (!this.loader.fullyRead) {
+        const payload = await this.loader.getPayload() as string;
+        if (this.loader.fullyRead) {
+          this.normalize(compile(payload));
+        }
+      }
+    } else if (!this.loader.fullyRead) {
+      this.currentTime = time || 0;
+      if (this.canRequestPayload) {
+        if (this.timer) clearTimeout(this.timer);
+        this.timeout = false;
+        this.timer = setTimeout(() => { this.timeout = true; }, 10000);
+        this.isRequesting = true;
+        const payload = await this.loader.getPayload(time) as string || '';
+        const newLines = payload.split(/\r?\n/);
+        const deDuplicatedPayload = newLines.filter(line => !this.lastLines.includes(line)).join('\n');
+        this.lastLines = newLines;
+        if (!this.assStream) this.assStream = new AssStream();
+        const result = this.assStream.compile(deDuplicatedPayload);
+        if (!this.timeSegments) this.timeSegments = new StreamTimeSegments();
+        this.timeSegments.bulkInsert(result.map(({ Start, End }) => [Start, End]), time || 0);
+        this.normalize(this.assStream.compiled);
+        this.isRequesting = false;
+      }
+    }
+    return getDialogues(this.dialogues, time);
   }
 }
diff --git a/src/renderer/services/subtitle/parsers/base.ts b/src/renderer/services/subtitle/parsers/base.ts
deleted file mode 100644
index d5e4d5cdcb..0000000000
--- a/src/renderer/services/subtitle/parsers/base.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { isEqual } from 'lodash';
-import {
-  IParser, Format, Cue, IVideoSegment, IDialogue,
-} from '@/interfaces/ISubtitle';
-
-function getDialogues(dialogues: Cue[], time?: number) {
-  return typeof time === 'undefined' ? dialogues
-    : dialogues.filter(({ start, end, text }) => (
-      (start <= time && end >= time) && !!text
-    ));
-}
-
-function calculateVideoSegments(dialogues: IDialogue[], duration: number) {
-  const subtitleSegments = dialogues
-    .filter(({ text }) => !!text)
-    .map(({ start, end }) => ({ start, end }))
-    .sort((a, b) => a.start - b.start);
-  const result = [{ start: 0, end: 0 }];
-  let currentIndex = 0;
-  while (duration && result[result.length - 1].end !== duration) {
-    const lastElement = result[result.length - 1];
-    if (currentIndex < subtitleSegments.length) {
-      if (lastElement.end <= subtitleSegments[currentIndex].start) {
-        [lastElement.end] = [subtitleSegments[currentIndex].start];
-        result.push(subtitleSegments[currentIndex]);
-        currentIndex += 1;
-      } else {
-        currentIndex += 1;
-      }
-    } else {
-      lastElement.end = duration;
-    }
-  }
-  return result.map(segment => ({ ...segment, played: false }));
-}
-
-export class BaseParser implements IParser {
-  public readonly payload: unknown;
-
-  public metadata = {};
-
-  public dialogues: Cue[];
-
-  public format: Format = Format.Unknown;
-
-  public async getMetadata() { return this.metadata; }
-
-  public async getDialogues(time?: number) {
-    return getDialogues(this.dialogues, time);
-  }
-
-  private videoSegments: IVideoSegment[];
-
-  public async getVideoSegments(duration: number) {
-    if (this.videoSegments) return this.videoSegments;
-    this.videoSegments = calculateVideoSegments(this.dialogues, duration);
-    return this.videoSegments;
-  }
-
-  private lastSegment: IVideoSegment;
-
-  private lastSegmentPlayedTime: number = 0;
-
-  public updateVideoSegments(lastTime: number, currentTime: number) {
-    const { videoSegments, lastSegment } = this;
-    const currentSegment = videoSegments
-      .find(segment => segment.start <= currentTime && segment.end > currentTime);
-    if (currentSegment && !currentSegment.played) {
-      if (isEqual(currentSegment, lastSegment)) {
-        this.lastSegmentPlayedTime += currentTime - lastTime;
-      } else {
-        const segmentTime = currentSegment.end - currentSegment.start;
-        if (this.lastSegmentPlayedTime / segmentTime >= 0.9) {
-          const index = videoSegments.findIndex(segment => isEqual(segment, currentSegment));
-          if (index) videoSegments[index] = { ...currentSegment, played: true };
-        }
-      }
-      this.lastSegment = currentSegment;
-    }
-    return videoSegments
-      .filter(({ played }) => played)
-      .map(({ end, start }) => end - start)
-      .reduce((playedTime, currentSegmentTime) => {
-        playedTime += currentSegmentTime;
-        return playedTime;
-      }, 0);
-  }
-
-  // eslint-disable-next-line
-  public async parse() {}
-}
diff --git a/src/renderer/services/subtitle/parsers/sagi.ts b/src/renderer/services/subtitle/parsers/sagi.ts
index a6a61db0bb..779af6fdee 100644
--- a/src/renderer/services/subtitle/parsers/sagi.ts
+++ b/src/renderer/services/subtitle/parsers/sagi.ts
@@ -1,26 +1,33 @@
 import { TranscriptResponse } from 'sagi-api/translation/v1/translation_pb';
-import { Format, Cue } from '@/interfaces/ISubtitle';
-import { BaseParser } from './base';
-import { tagsGetter } from '../utils';
+import {
+  Format, Cue, IParser, IVideoSegments,
+} from '@/interfaces/ISubtitle';
+import { tagsGetter, getDialogues } from '../utils';
+import { SagiLoader } from '../utils/loaders';
 
 export type SagiSubtitlePayload = TranscriptResponse.Cue.AsObject[];
 
-export class SagiParser extends BaseParser {
-  public payload: SagiSubtitlePayload;
+export class SagiParser implements IParser {
+  public get format() { return Format.Sagi; }
 
-  public format = Format.Sagi;
+  public readonly loader: SagiLoader;
 
-  public constructor(sagiPayload: SagiSubtitlePayload) {
-    super();
-    this.payload = sagiPayload;
+  public readonly videoSegments: IVideoSegments;
+
+  public constructor(loader: SagiLoader, videoSegments: IVideoSegments) {
+    this.loader = loader;
+    this.videoSegments = videoSegments;
   }
 
-  public dialogues: Cue[] = [];
+  public async getMetadata() { return { PlayResX: '', PlayResY: '' }; }
+
+  private dialogues: Cue[] = [];
 
   private baseTags = { alignment: 2, pos: undefined };
 
   private normalizer(parsedSubtitle: SagiSubtitlePayload) {
     const finalDialogues: Cue[] = [];
+    parsedSubtitle = Array.isArray(parsedSubtitle) ? parsedSubtitle : [];
     parsedSubtitle.forEach(({ startTime, endTime, text }) => {
       finalDialogues.push({
         start: startTime,
@@ -33,9 +40,14 @@ export class SagiParser extends BaseParser {
       });
     });
     this.dialogues = finalDialogues;
+    this.dialogues.forEach(({ start, end }) => this.videoSegments.insert(start, end));
   }
 
-  public async parse() {
-    this.normalizer(this.payload);
+  public async getDialogues(time?: number) {
+    if (!this.loader.fullyRead) {
+      const payload = await this.loader.getPayload() as SagiSubtitlePayload;
+      if (this.loader.fullyRead) this.normalizer(payload);
+    }
+    return getDialogues(this.dialogues, time);
   }
 }
diff --git a/src/renderer/services/subtitle/parsers/srt.ts b/src/renderer/services/subtitle/parsers/srt.ts
index 64a611f457..afdf6ebba8 100644
--- a/src/renderer/services/subtitle/parsers/srt.ts
+++ b/src/renderer/services/subtitle/parsers/srt.ts
@@ -1,8 +1,10 @@
 // @ts-ignore
 import { parse, toMS } from 'subtitle';
-import { Format, Cue } from '@/interfaces/ISubtitle';
-import { BaseParser } from './base';
-import { tagsGetter } from '../utils';
+import {
+  Format, Cue, IParser, IVideoSegments,
+} from '@/interfaces/ISubtitle';
+import { tagsGetter, getDialogues } from '../utils';
+import { LocalTextLoader } from '../utils/loaders';
 
 type ParsedSubtitle = {
   start: string;
@@ -10,36 +12,47 @@ type ParsedSubtitle = {
   text: string;
 }[];
 
-export class SrtParser extends BaseParser {
-  public payload = '';
+export class SrtParser implements IParser {
+  public get format() { return Format.SubRip; }
 
-  public format = Format.SubRip;
+  public readonly loader: LocalTextLoader;
 
-  public constructor(srtPayload: string) {
-    super();
-    this.payload = srtPayload;
+  public readonly videoSegments: IVideoSegments;
+
+  public constructor(textLoader: LocalTextLoader, videoSegments: IVideoSegments) {
+    this.loader = textLoader;
+    this.videoSegments = videoSegments;
   }
 
-  public dialogues: Cue[];
+  public async getMetadata() { return { PlayResX: '', PlayResY: '' }; }
+
+  private dialogues: Cue[] = [];
 
   private baseTags = { alignment: 2, pos: undefined };
 
   private normalizer(parsedSubtitle: ParsedSubtitle) {
     if (!parsedSubtitle.length) throw new Error('Unsupported Subtitle');
     const finalDialogues: Cue[] = [];
-    parsedSubtitle.forEach((subtitle) => {
-      finalDialogues.push({
-        start: toMS(subtitle.start) / 1000,
-        end: toMS(subtitle.end) / 1000,
-        tags: tagsGetter(subtitle.text, this.baseTags),
-        text: subtitle.text.replace(/\{[^{}]*\}/g, '').replace(/[\\/][Nn]|\r?\n|\r/g, '\n'),
-        format: this.format,
+    parsedSubtitle
+      .filter(({ text }) => text)
+      .forEach((subtitle) => {
+        finalDialogues.push({
+          start: toMS(subtitle.start) / 1000,
+          end: toMS(subtitle.end) / 1000,
+          tags: tagsGetter(subtitle.text, this.baseTags),
+          text: subtitle.text.replace(/\{[^{}]*\}/g, '').replace(/[\\/][Nn]|\r?\n|\r/g, '\n'),
+          format: this.format,
+        });
       });
-    });
     this.dialogues = finalDialogues;
+    this.dialogues.forEach(({ start, end }) => this.videoSegments.insert(start, end));
   }
 
-  public async parse() {
-    this.normalizer(parse(this.payload));
+  public async getDialogues(time?: number) {
+    if (!this.loader.fullyRead) {
+      const payload = await this.loader.getPayload() as string;
+      if (this.loader.fullyRead) this.normalizer(parse(payload));
+    }
+    return getDialogues(this.dialogues, time);
   }
 }
diff --git a/src/renderer/services/subtitle/parsers/vtt.ts b/src/renderer/services/subtitle/parsers/vtt.ts
index 3d8b394a7b..3fb0b238a8 100644
--- a/src/renderer/services/subtitle/parsers/vtt.ts
+++ b/src/renderer/services/subtitle/parsers/vtt.ts
@@ -1,7 +1,10 @@
 // @ts-ignore
 import { parse, toMS } from 'subtitle';
-import { Format, Cue } from '@/interfaces/ISubtitle';
-import { BaseParser } from './base';
+import {
+  Format, Cue, IParser, IVideoSegments,
+} from '@/interfaces/ISubtitle';
+import { tagsGetter, getDialogues } from '../utils';
+import { LocalTextLoader } from '../utils/loaders';
 
 type ParsedSubtitle = {
   start: number;
@@ -10,54 +13,47 @@ type ParsedSubtitle = {
   settings: string;
 }[];
 
-export class VttParser extends BaseParser {
-  public readonly payload: string = '';
+export class VttParser implements IParser {
+  public get format() { return Format.SubRip; }
 
-  public format = Format.WebVTT;
+  public readonly loader: LocalTextLoader;
 
-  public constructor(vttString: string) {
-    super();
-    this.payload = vttString;
+  public readonly videoSegments: IVideoSegments;
+
+  public constructor(textLoader: LocalTextLoader, videoSegments: IVideoSegments) {
+    this.loader = textLoader;
+    this.videoSegments = videoSegments;
   }
 
-  public dialogues: Cue[];
+  public async getMetadata() { return { PlayResX: '', PlayResY: '' }; }
+
+  private dialogues: Cue[] = [];
 
-  private baseTags = {
-    // https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API#Cue_settings
-    vertical: '',
-    line: '',
-    position: '',
-    // size: '',
-    // align: '',
-  };
+  private baseTags = { alignment: 2, pos: undefined };
 
   private normalizer(parsedSubtitle: ParsedSubtitle) {
     if (!parsedSubtitle.length) throw new Error('Unsupported Subtitle');
     const finalDialogues: Cue[] = [];
-    parsedSubtitle.forEach((subtitle) => {
-      finalDialogues.push({
-        start: toMS(subtitle.start) / 1000,
-        end: toMS(subtitle.end) / 1000,
-        text: subtitle.text.replace(/\{[^{}]*\}/g, '').replace(/[\\/][Nn]|\r?\n|\r/g, '\n'),
-        tags: !subtitle.settings ? this.baseTags : {
-          ...this.baseTags,
-          ...subtitle.settings
-            .split(' ')
-            .reduce(
-              (accu: {}, curr: string) => ({
-                ...accu,
-                [curr.split(':')[0]]: curr.split(':')[1],
-              }),
-              {},
-            ),
-        },
-        format: this.format,
+    parsedSubtitle
+      .filter(({ text }) => text)
+      .forEach((subtitle) => {
+        finalDialogues.push({
+          start: toMS(subtitle.start) / 1000,
+          end: toMS(subtitle.end) / 1000,
+          tags: tagsGetter(subtitle.text, this.baseTags),
+          text: subtitle.text.replace(/\{[^{}]*\}/g, '').replace(/[\\/][Nn]|\r?\n|\r/g, '\n'),
+          format: this.format,
+        });
       });
-    });
     this.dialogues = finalDialogues;
+    this.dialogues.forEach(({ start, end }) => this.videoSegments.insert(start, end));
   }
 
-  public async parse() {
-    this.normalizer(parse(this.payload));
+  public async getDialogues(time?: number) {
+    if (!this.loader.fullyRead) {
+      const payload = await this.loader.getPayload() as string;
+      if (this.loader.fullyRead) this.normalizer(parse(payload));
+    }
+    return getDialogues(this.dialogues, time);
   }
 }
diff --git a/src/renderer/services/subtitle/utils/index.ts b/src/renderer/services/subtitle/utils/index.ts
index a7bc8d9acf..d3c730d990 100644
--- a/src/renderer/services/subtitle/utils/index.ts
+++ b/src/renderer/services/subtitle/utils/index.ts
@@ -5,7 +5,7 @@ import {
 } from 'fs-extra';
 import { extname } from 'path';
 import {
-  ITags, IOrigin, Type, Format, IParser, ILoader,
+  ITags, IOrigin, Type, Format, IParser, ILoader, Cue, IVideoSegments,
 } from '@/interfaces/ISubtitle';
 import { LanguageCode } from '@/libs/language';
 
@@ -14,7 +14,6 @@ import {
 } from '@/services/subtitle';
 
 import { assFragmentLanguageLoader, srtFragmentLanguageLoader, vttFragmentLanguageLoader } from './languageLoader';
-import { SagiSubtitlePayload } from '../parsers';
 import {
   IEmbeddedOrigin,
   EmbeddedTextStreamLoader, LocalTextLoader, SagiLoader,
@@ -171,6 +170,13 @@ export async function inferLanguageFromPath(path: string): Promise<LanguageCode>
   }
 }
 
+export function getDialogues(dialogues: Cue[], time?: number) {
+  return typeof time === 'undefined' ? dialogues
+    : dialogues.filter(({ start, end, text }) => (
+      (start <= time && end >= time) && !!text
+    ));
+}
+
 export function getLoader(source: IOrigin): ILoader {
   switch (source.type) {
     default:
@@ -182,23 +188,28 @@ export function getLoader(source: IOrigin): ILoader {
     case Type.Local:
       return new LocalTextLoader(source.source as string);
     case Type.Online:
+      return new SagiLoader(source.source as string);
     case Type.Translated:
       return new SagiLoader(source.source as string);
   }
 }
 
-export function getParser(format: Format, payload: unknown): IParser {
+export function getParser(
+  format: Format,
+  loader: ILoader,
+  videoSegments: IVideoSegments,
+): IParser {
   switch (format) {
+    default:
+      throw new Error('Unknown format');
     case Format.AdvancedSubStationAplha:
     case Format.SubStationAlpha:
-      return new AssParser(payload as string);
-    case Format.SubRip:
-      return new SrtParser(payload as string);
+      return new AssParser(loader, videoSegments);
     case Format.Sagi:
-      return new SagiParser(payload as SagiSubtitlePayload);
+      return new SagiParser(loader as SagiLoader, videoSegments);
+    case Format.SubRip:
+      return new SrtParser(loader as LocalTextLoader, videoSegments);
     case Format.WebVTT:
-      return new VttParser(payload as string);
-    default:
-      throw new Error();
+      return new VttParser(loader as LocalTextLoader, videoSegments);
   }
 }

From f98ada253262ea3e8990a1a4e02677bd01186473 Mon Sep 17 00:00:00 2001
From: Yan Yifeng <yanyifeng@splayer.org>
Date: Wed, 4 Sep 2019 18:29:47 +0800
Subject: [PATCH 072/123] refactor(storage): refactor subtitle storage

Refactor subtitle stroage services according to new subtitle interfaces.

1. Tweak subtitle storage interfaces according to ISubtitle interface.
2. Upgrade subtitle database according to ISubtitleStorage interface.
3. Refactor DatabaseGenerator accordingly.
4. Remove file.ts.
---
 src/renderer/interfaces/ISubtitleStorage.ts   |  16 +--
 src/renderer/services/storage/subtitle/db.ts  |  81 +++++++----
 .../services/storage/subtitle/file.ts         | 109 --------------
 .../services/storage/subtitle/index.ts        | 134 +++++-------------
 4 files changed, 94 insertions(+), 246 deletions(-)
 delete mode 100644 src/renderer/services/storage/subtitle/file.ts

diff --git a/src/renderer/interfaces/ISubtitleStorage.ts b/src/renderer/interfaces/ISubtitleStorage.ts
index f753a144e2..15743e016e 100644
--- a/src/renderer/interfaces/ISubtitleStorage.ts
+++ b/src/renderer/interfaces/ISubtitleStorage.ts
@@ -1,29 +1,25 @@
 import {
-  Format, Type, IVideoSegment, IOrigin,
+  Format, IRawVideoSegment, IOrigin,
 } from './ISubtitle';
 import { LanguageCode } from '@/libs/language';
 
 export interface IStoredSubtitle {
   hash: string;
-  source: IOrigin[];
+  sources: IOrigin[];
   format: Format;
   language: LanguageCode;
 }
 export interface IStoredSubtitleItem {
-  /** must be real hash to retrieve real subtitle from db */
   hash: string;
-  /** may be fake type for display use only */
-  type: Type;
-  /** may also be fake source for display use only */
-  source: unknown;
-  videoSegments?: IVideoSegment[];
+  source: IOrigin;
+  videoSegments?: IRawVideoSegment[];
   delay: number;
 }
-interface IPrimarySecondary<T> {
+export interface IPrimarySecondary<T> {
   primary?: T;
   secondary?: T;
 }
-export type SelectedSubtitle = { hash: string, source?: IOrigin };
+export type SelectedSubtitle = { hash: string, source: IOrigin };
 export interface ISubtitlePreference {
   mediaHash: string;
   list: IStoredSubtitleItem[];
diff --git a/src/renderer/services/storage/subtitle/db.ts b/src/renderer/services/storage/subtitle/db.ts
index e2669ac154..dca3190195 100644
--- a/src/renderer/services/storage/subtitle/db.ts
+++ b/src/renderer/services/storage/subtitle/db.ts
@@ -5,10 +5,10 @@ import {
 import { LanguageCode } from '@/libs/language';
 import { DATADB_NAME } from '@/constants';
 import {
-  Type, Format, IOrigin, IVideoSegment,
+  Type, Format, IOrigin, IRawVideoSegment,
 } from '@/interfaces/ISubtitle';
 import {
-  IStoredSubtitle, IStoredSubtitleItem, ISubtitlePreference, SelectedSubtitle,
+  IStoredSubtitle, IStoredSubtitleItem, ISubtitlePreference, SelectedSubtitle, IPrimarySecondary,
 } from '@/interfaces/ISubtitleStorage';
 
 interface IDataDBV3 extends DBSchema {
@@ -26,6 +26,32 @@ interface IDataDBV3 extends DBSchema {
   };
 }
 interface IDataDBV4 extends DBSchema {
+  'subtitles': {
+    key: string;
+    value: {
+      hash: string;
+      source: IOrigin[];
+      format: Format;
+      language: LanguageCode;
+    };
+  };
+  'subtitle-preferences': {
+    key: string;
+    value: {
+      mediaHash: string;
+      list: {
+        hash: string;
+        type: Type;
+        source: unknown;
+        videoSegments?: IRawVideoSegment[];
+        delay: number;
+      }[];
+      language: IPrimarySecondary<LanguageCode>;
+      selected: IPrimarySecondary<SelectedSubtitle>;
+    };
+  };
+}
+interface IDataDBV5 extends DBSchema {
   'subtitles': {
     key: string;
     value: IStoredSubtitle;
@@ -37,14 +63,14 @@ interface IDataDBV4 extends DBSchema {
 }
 
 interface IAddSubtitleOptions {
-  source: IOrigin;
   hash: string;
+  source: IOrigin;
   format: Format;
   language: LanguageCode;
 }
 interface IRemoveSubtitleOptions {
-  source: unknown;
   hash: string;
+  source: IOrigin;
 }
 interface IUpdateSubtitleOptions {
   hash: string;
@@ -54,32 +80,34 @@ interface IUpdateSubtitleOptions {
 }
 interface IUpdateSubtitleItemOptions {
   hash: string;
-  type?: Type;
-  source?: unknown;
-  videoSegments?: IVideoSegment[];
+  source?: IOrigin;
+  videoSegments?: IRawVideoSegment[];
   delay?: number;
 }
 
 export class SubtitleDataBase {
-  private db: IDBPDatabase<IDataDBV4>;
+  private db: IDBPDatabase<IDataDBV5>;
 
   private async getDb() {
     if (!this.db) {
-      this.db = await openDB<IDataDBV4>(
+      this.db = await openDB<IDataDBV5>(
         DATADB_NAME,
-        4,
+        5,
         {
           async upgrade(db, version) {
-            if (version === 0) {
-              db.createObjectStore('subtitles', { keyPath: 'hash' });
-            }
             if (version > 0 && version < 3) {
               db.deleteObjectStore('subtitles');
               db.createObjectStore('subtitles', { keyPath: 'hash' });
             } else if (version === 3) {
               const v3Db = db as unknown as IDBPDatabase<IDataDBV3>;
+              v3Db.deleteObjectStore('subtitles');
               v3Db.deleteObjectStore('preferences');
+            } else if (version === 4) {
+              const v4Db = db as unknown as IDBPDatabase<IDataDBV4>;
+              v4Db.deleteObjectStore('subtitles');
+              v4Db.deleteObjectStore('subtitle-preferences');
             }
+            db.createObjectStore('subtitles', { keyPath: 'hash' });
             db.createObjectStore('subtitle-preferences', { keyPath: 'mediaHash' });
           },
         },
@@ -103,12 +131,12 @@ export class SubtitleDataBase {
     if (!storedSubtitle) {
       return objectStore.add({
         ...subtitle,
-        source: [subtitle.source],
+        sources: [subtitle.source],
       });
     }
     return objectStore.put({
       ...subtitle,
-      source: uniqWith(storedSubtitle.source.concat(subtitle.source), isEqual),
+      sources: uniqWith(storedSubtitle.sources.concat(subtitle.source), isEqual),
     });
   }
 
@@ -118,8 +146,8 @@ export class SubtitleDataBase {
       .objectStore('subtitles');
     const storedSubtitle = await objectStore.get(subtitle.hash);
     if (storedSubtitle) {
-      remove(storedSubtitle.source, storedSource => isEqual(storedSource, subtitle.source));
-      if (!storedSubtitle.source.length) {
+      remove(storedSubtitle.sources, storedSource => isEqual(storedSource, subtitle.source));
+      if (!storedSubtitle.sources.length) {
         return objectStore.delete(subtitle.hash);
       }
       return objectStore.put({ ...storedSubtitle });
@@ -144,7 +172,7 @@ export class SubtitleDataBase {
     let cursor = await objectStore.openCursor();
     const deletedSubtitleHashes: string[] = [];
     while (cursor && Object.keys(hashSourcesMap).length) {
-      const { hash, source: storedSources } = cursor.value;
+      const { hash, sources: storedSources } = cursor.value;
       const sourcesToDelete = hashSourcesMap[hash];
       if (sourcesToDelete) {
         remove(storedSources, ({ source }) => sourcesToDelete.some(sub => isEqual(sub, source)));
@@ -166,7 +194,7 @@ export class SubtitleDataBase {
     const oldSubtitle = await objectStore.get(subtitle.hash);
     if (oldSubtitle) {
       const newSubtitle = { ...oldSubtitle };
-      if (source) newSubtitle.source = unionWith(oldSubtitle.source.concat([source]), isEqual);
+      if (source) newSubtitle.sources = unionWith(oldSubtitle.sources.concat([source]), isEqual);
       if (format) newSubtitle.format = format;
       if (language) newSubtitle.language = language;
       return objectStore.put(newSubtitle);
@@ -184,15 +212,9 @@ export class SubtitleDataBase {
   private static generateDefaultPreference(mediaHash: string): ISubtitlePreference {
     return {
       mediaHash,
-      language: {
-        primary: LanguageCode.Default,
-        secondary: LanguageCode.Default,
-      },
       list: [],
-      selected: {
-        primary: { hash: '' },
-        secondary: { hash: '' },
-      },
+      language: {},
+      selected: {},
     };
   }
 
@@ -267,10 +289,7 @@ export class SubtitleDataBase {
         keyBy(subtitlesToUpdate, ({ hash }) => hash),
         (objVal: IStoredSubtitleItem, srcVal: IStoredSubtitleItem) => {
           const destObj = { ...objVal };
-          const {
-            type, source, videoSegments, delay,
-          } = srcVal;
-          if (type) destObj.type = type;
+          const { source, videoSegments, delay } = srcVal;
           if (source) destObj.source = source;
           if (videoSegments) destObj.videoSegments = videoSegments;
           if (isFinite(delay)) destObj.delay = delay;
diff --git a/src/renderer/services/storage/subtitle/file.ts b/src/renderer/services/storage/subtitle/file.ts
deleted file mode 100644
index ffb57d2180..0000000000
--- a/src/renderer/services/storage/subtitle/file.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import {
-  join, extname, dirname, basename,
-} from 'path';
-import { remote } from 'electron';
-import {
-  copyFile, existsSync, outputFile, ensureDirSync, remove, readdir,
-} from 'fs-extra';
-import { Entity, IOrigin, Type } from '@/interfaces/ISubtitle';
-import { embeddedSrcLoader, IEmbeddedOrigin, SagiSubtitlePayload } from '@/services/subtitle';
-import { sagiSubtitleToWebVTT } from '@/services/subtitle/utils/transcoders';
-import { updateSubtitle } from '.';
-import { ELECTRON_CACHE_DIRNAME, DEFAULT_DIRNAME, SUBTITLE_DIRNAME } from '@/constants';
-import { formatToExtension } from '@/services/subtitle/utils';
-import { mediaQuickHash } from '@/libs/utils';
-
-const { app } = remote;
-
-const subtitleCacheDirPath = join(
-  app.getPath(ELECTRON_CACHE_DIRNAME),
-  DEFAULT_DIRNAME,
-  SUBTITLE_DIRNAME,
-);
-/** copy the subtitle from the src to cacheFileStorage */
-export async function cacheLocalSubtitle(subtitle: Entity): Promise<IOrigin> {
-  const { source, hash } = subtitle;
-  const storedPath = join(subtitleCacheDirPath, `${hash}${extname(source.source as string)}`);
-  ensureDirSync(subtitleCacheDirPath);
-  if (!existsSync(storedPath)) await copyFile(source.source as string, storedPath);
-  return {
-    type: Type.Local,
-    source: storedPath,
-  };
-}
-/** copy the subtitle if extracted */
-export async function cacheEmbeddedSubtitle(subtitle: Entity): Promise<IOrigin | undefined> {
-  const { format } = subtitle;
-  const source = subtitle.source as IEmbeddedOrigin;
-  const videoHash = await mediaQuickHash.try(source.source.videoSrc);
-  if (videoHash) {
-    const storedPath = join(subtitleCacheDirPath, `${videoHash}-${source.source.streamIndex}.${formatToExtension(subtitle.format)}`);
-    const { extractedSrc, videoSrc, streamIndex } = (subtitle.source as IEmbeddedOrigin).source;
-    const srcPath = extractedSrc || await embeddedSrcLoader(videoSrc, streamIndex, format);
-    ensureDirSync(subtitleCacheDirPath);
-    if (!existsSync(srcPath)) await copyFile(srcPath, storedPath);
-    return {
-      type: Type.Local,
-      source: storedPath,
-    };
-  }
-  return undefined;
-}
-/** convert payload to WebVTT subtitle and cache it */
-export async function cacheOnlineSubtitle(subtitle: Entity): Promise<IOrigin | undefined> {
-  const { hash, payload } = subtitle;
-  if (payload) {
-    const storedPath = join(subtitleCacheDirPath, `${hash}.${formatToExtension(subtitle.format)}`);
-    if (!existsSync(storedPath)) {
-      await outputFile(storedPath, sagiSubtitleToWebVTT(payload as SagiSubtitlePayload));
-    }
-    return {
-      type: Type.Local,
-      source: storedPath,
-    };
-  }
-  return undefined;
-}
-
-export async function removeCachedSubtitle(hash: string) {
-  ensureDirSync(subtitleCacheDirPath);
-  const cachedSubtitlePath = (await readdir(subtitleCacheDirPath))
-    .find(path => basename(path).startsWith(hash));
-  if (cachedSubtitlePath && existsSync(cachedSubtitlePath)) {
-    await remove(cachedSubtitlePath);
-    return {
-      type: Type.Local,
-      source: cachedSubtitlePath,
-    };
-  }
-  return '';
-}
-
-export async function removeCachedSubtitles(
-  hashes: string[],
-): Promise<{ hash: string, source: IOrigin }[]> {
-  const cachedSubtitlePaths = (await readdir(subtitleCacheDirPath))
-    .filter(path => hashes.includes(basename(path, extname(path))))
-    .map(basepath => join(subtitleCacheDirPath, basepath));
-  return Promise.all(cachedSubtitlePaths.map(async (path) => {
-    await remove(path);
-    return {
-      hash: basename(path, extname(path)),
-      source: {
-        type: Type.Local,
-        source: path,
-      },
-    };
-  }));
-}
-
-/** update subtitle database with new origin */
-export function addNewSourceToDb(subtitle: Entity, newSource: IOrigin) {
-  subtitle.source = newSource;
-  return updateSubtitle(subtitle);
-}
-
-export function isCachedSubtitle(subtitleSource: IOrigin) {
-  const { type, source } = subtitleSource;
-  return type === Type.Local && typeof source === 'string' && existsSync(source) && dirname(source) === subtitleCacheDirPath;
-}
diff --git a/src/renderer/services/storage/subtitle/index.ts b/src/renderer/services/storage/subtitle/index.ts
index fcad1116df..cb73eeb634 100644
--- a/src/renderer/services/storage/subtitle/index.ts
+++ b/src/renderer/services/storage/subtitle/index.ts
@@ -1,47 +1,41 @@
+import { dirname } from 'path';
 import {
-  Entity, SubtitleControlListItem, IEntityGenerator, Type, Format, IOrigin,
+  IEntity, IEntityGenerator, Type, Format, IOrigin,
 } from '@/interfaces/ISubtitle';
 import { LanguageCode } from '@/libs/language';
 import { SelectedSubtitle, IStoredSubtitleItem } from '@/interfaces/ISubtitleStorage';
 import { SubtitleDataBase } from './db';
-
-import Sagi from '@/libs/sagi';
-import { loadLocalFile } from '@/services/subtitle/utils';
-import { embeddedSrcLoader, IEmbeddedOrigin } from '@/services/subtitle/loaders/embedded';
-import {
-  cacheEmbeddedSubtitle, cacheLocalSubtitle, cacheOnlineSubtitle,
-  isCachedSubtitle,
-  addNewSourceToDb,
-} from './file';
+import { SUBTITLE_REAL_DIRNAME } from '@/constants';
+import { sourceToFormat } from '@/services/subtitle/utils';
 
 const db = new SubtitleDataBase();
 
-export async function storeSubtitle(subtitle: Entity) {
+export async function storeSubtitle(subtitle: IEntity) {
   if (subtitle) {
     const {
-      source, hash, format, language,
+      realSource, hash, format, language,
     } = subtitle;
-    if (source && hash && language && format && format !== Format.Unknown) {
+    if (realSource && hash && language && format && format !== Format.Unknown) {
       db.addSubtitle({
-        source, format, language, hash,
+        source: realSource, format, language, hash,
       });
     }
   }
 }
-export async function removeSubtitle(subtitle: Entity) {
+export async function removeSubtitle(subtitle: IEntity) {
   if (subtitle) {
-    const { hash, source } = subtitle;
-    if (hash && source) db.removeSubtitle({ hash, source });
+    const { hash, realSource } = subtitle;
+    if (hash && realSource) db.removeSubtitle({ hash, source: realSource });
   }
 }
-export async function updateSubtitle(subtitle: Entity) {
+export async function updateSubtitle(subtitle: IEntity) {
   if (subtitle) {
     const {
-      hash, source, format, language,
+      hash, realSource, format, language,
     } = subtitle;
-    if (source && hash && format && language) {
+    if (realSource && hash && format && language) {
       db.updateSubtitle({
-        hash, source, format, language,
+        hash, source: realSource, format, language,
       });
     }
   }
@@ -53,41 +47,41 @@ export function retrieveStoredSubtitleList(mediaHash: string = '') {
   return db.retrieveSubtitleList(mediaHash);
 }
 export function addSubtitleItemsToList(
-  subtitles: SubtitleControlListItem[] = [],
+  subtitles: IEntity[] = [],
   mediaHash: string = '',
 ) {
   const storedSubtitles = subtitles
-    .filter(s => s && s.hash && s.source && s.type)
+    .filter(s => s && s.hash && s.displaySource)
     .map(({
-      hash, type, source, delay,
+      hash, displaySource, delay,
     }) => ({
-      hash, type, source, delay,
+      hash, source: displaySource, delay,
     }));
   return db.addSubtitleItemsToList(mediaHash, storedSubtitles);
 }
 export function updateSubtitleList(
-  subtitles: SubtitleControlListItem[] = [],
+  subtitles: IEntity[] = [],
   mediaHash: string = '',
 ) {
   const subtitlesToUpdate = subtitles
-    .filter(s => s && s.hash && s.source && s.type)
+    .filter(s => s && s.hash && s.displaySource)
     .map(({
-      hash, type, source, delay,
+      hash, displaySource, delay,
     }) => ({
-      hash, type, source, delay,
+      hash, source: displaySource, delay,
     }));
   return db.updateSubtitleList(mediaHash, subtitlesToUpdate);
 }
 export function removeSubtitleItemsFromList(
-  subtitles: SubtitleControlListItem[] = [],
+  subtitles: IEntity[] = [],
   mediaHash: string = '',
 ) {
   const storedSubtitles = subtitles
-    .filter(s => s && s.hash && s.source && s.type)
+    .filter(s => s && s.hash && s.displaySource)
     .map(({
-      hash, type, source, delay,
+      hash, displaySource, delay,
     }) => ({
-      hash, type, source, delay,
+      hash, source: displaySource, delay,
     }));
   return db.removeSubtitleItemsFromList(mediaHash, storedSubtitles);
 }
@@ -108,10 +102,6 @@ export function retrieveSelectedSubtitles(mediaHash: string = '') {
 }
 
 export class DatabaseGenerator implements IEntityGenerator {
-  private type: Type;
-
-  public async getType() { return this.type; }
-
   private format: Format;
 
   public async getFormat() { return this.format; }
@@ -120,39 +110,13 @@ export class DatabaseGenerator implements IEntityGenerator {
 
   public async getLanguage() { return this.language; }
 
-  private sources: IOrigin[];
-
-  public async getSource() {
-    const cachedSubtitle = this.sources.find(isCachedSubtitle);
-    if (cachedSubtitle) return cachedSubtitle;
-    return this.sources[0];
-  }
+  private displaySource: IOrigin;
 
-  private storedSource: IOrigin;
+  public async getDisplaySource() { return this.displaySource; }
 
-  public async getStoredSource() { return this.storedSource; }
+  private realSource: IOrigin;
 
-  public async getPayload() {
-    const { type, source } = await this.getSource();
-    switch (type) {
-      case Type.Embedded: {
-        const { source } = await this.getSource() as IEmbeddedOrigin;
-        const embeddedSrc = await embeddedSrcLoader(
-          source.videoSrc,
-          source.streamIndex,
-          this.format,
-        );
-        return loadLocalFile(embeddedSrc);
-      }
-      case Type.Local:
-        return loadLocalFile(source as string);
-      case Type.Online:
-      case Type.Translated:
-        return Sagi.getTranscript({ transcriptIdentity: source as string, startTime: 0 });
-      default:
-        throw new Error(`Unexpected subtitle type ${type}.`);
-    }
-  }
+  public async getRealSource() { return this.realSource; }
 
   private hash: string;
 
@@ -167,19 +131,17 @@ export class DatabaseGenerator implements IEntityGenerator {
   }
 
   public static async from(storedSubtitleItem: IStoredSubtitleItem) {
-    const { hash, type, delay } = storedSubtitleItem;
+    const { hash, source, delay } = storedSubtitleItem;
     const storedSubtitle = await db.retrieveSubtitle(hash);
     if (storedSubtitle) {
       const newGenerator = new DatabaseGenerator();
-      newGenerator.storedSource = {
-        type,
-        source: storedSubtitleItem.source,
-      };
-      const { source, format, language } = storedSubtitle;
-      newGenerator.type = type;
-      newGenerator.format = format;
+      newGenerator.displaySource = source;
+      const { sources, language } = storedSubtitle;
+      newGenerator.realSource = sources
+        .find(({ type, source }) => type === Type.Local
+          && dirname(source as string) === SUBTITLE_REAL_DIRNAME) || sources[0];
+      newGenerator.format = sourceToFormat(newGenerator.realSource);
       newGenerator.language = language;
-      newGenerator.sources = source;
       newGenerator.hash = hash;
       newGenerator.delayInSeconds = delay || 0;
       return newGenerator;
@@ -187,23 +149,3 @@ export class DatabaseGenerator implements IEntityGenerator {
     return undefined;
   }
 }
-
-export async function cacheSubtitle(subtitle: Entity) {
-  switch (subtitle.type) {
-    case Type.Embedded:
-      return cacheEmbeddedSubtitle(subtitle)
-        .then((source) => { if (source) addNewSourceToDb(subtitle, source); });
-    case Type.Local:
-      return cacheLocalSubtitle(subtitle)
-        .then(source => addNewSourceToDb(subtitle, source));
-    case Type.Translated:
-    case Type.Online: {
-      const newOnlineSource = await cacheOnlineSubtitle(subtitle);
-      if (newOnlineSource) return addNewSourceToDb(subtitle, newOnlineSource);
-      break;
-    }
-    default:
-      throw new Error(`Unexpected subtitle type ${subtitle.type}.`);
-  }
-  return undefined;
-}

From b09879ba6f9ec7f1ff147b5b62e2e0313f975c9e Mon Sep 17 00:00:00 2001
From: Yan Yifeng <yanyifeng@splayer.org>
Date: Wed, 4 Sep 2019 18:35:34 +0800
Subject: [PATCH 073/123] refactor(vuex): refactor subtitle vuex modules

1. Use new interfaces from ISubtitle and ISubtitleStorage.
2. Use Vuex types to get (some) type safety and remove no-explicit-any.
3. Rewrite Subtitle module with new IEntity and IEntityGenerator.
4. Fix some typos and wrong interface names.
5. Remove useless mutations and actions names.
6. Reset manager when switched from playing view to other view.
7. Fix audio translate make subtitle off.
---
 src/renderer/App.vue                          |   6 +
 src/renderer/store/actionTypes.js             |  12 +-
 src/renderer/store/modules/AudioTranslate.ts  |  10 +-
 src/renderer/store/modules/Subtitle.ts        | 435 ++++++++----------
 src/renderer/store/modules/SubtitleManager.ts | 357 +++++++-------
 src/renderer/store/mutationTypes.js           |  13 +-
 6 files changed, 418 insertions(+), 415 deletions(-)

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index c2c3c34a28..dc6cde184b 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -26,6 +26,8 @@
 <script lang="ts">
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ipcRenderer, Event } from 'electron';
+import { mapActions } from 'vuex';
+import { SubtitleManager as smActions } from '@/store/actionTypes';
 import Titlebar from '@/components/Titlebar.vue';
 import '@/css/style.scss';
 import drag from '@/helpers/drag';
@@ -45,6 +47,7 @@ export default {
   watch: {
     $route(to: any, from: any) {
       if (to.name === 'landing-view' && from.name === 'language-setting') this.transitionMode = 'fade';
+      if (from.name === 'playing-view' && to.name !== 'playing-view') this.resetManager();
       else this.transitionMode = '';
       this.showSidebar = false;
     },
@@ -71,6 +74,9 @@ export default {
     }, 1500000); // keep alive every 25 min.
   },
   methods: {
+    ...mapActions({
+      resetManager: smActions.resetManager,
+    }),
     mainCommitProxy(commitType: string, commitPayload: any) {
       this.$store.commit(commitType, commitPayload);
     },
diff --git a/src/renderer/store/actionTypes.js b/src/renderer/store/actionTypes.js
index b9b18b9313..716195919d 100644
--- a/src/renderer/store/actionTypes.js
+++ b/src/renderer/store/actionTypes.js
@@ -51,24 +51,21 @@ export const Subtitle = {
 export const newSubtitle = {
   initialize: 'INITIALIZE',
   add: 'ADD',
-  load: 'LOAD',
-  parse: 'PARSE',
+  getDialogues: 'GET_DIALOGUES_BY_TIME',
   store: 'STORE',
   cache: 'CACHE',
-  delete: 'DELETE',
+  pause: 'PAUSE',
+  resume: 'RESUME',
   upload: 'UPLOAD',
   manualUpload: 'MANUAL_UPLOAD',
-  getDialogues: 'GET_DIALOGUES_BY_TIME',
   updatePlayedTime: 'UPDATE_PLAYED_TIME',
-  startWatchPlayedTime: 'START_WATCH_PLAYED_TIME',
-  stopWatchPlayedTime: 'STOP_WATCH_PLAYED_TIME',
   alterDelay: 'ALTER_DELAY',
   resetDelay: 'RESET_DELAY',
+  destroy: 'DESTROY',
 };
 export const SubtitleManager = {
   initializeManager: 'INITIALIZE_MANAGER',
   resetManager: 'RESET_MANAGER',
-  destoryManager: 'DESTROY_MANAGER',
   addSubtitle: 'ADD_SUBTITLE',
   removeSubtitle: 'REMOVE_SUBTITLE',
   refreshSubtitlesInitially: 'REFRESH_SUBTITLES_INITIALLY',
@@ -82,6 +79,7 @@ export const SubtitleManager = {
   addDatabaseSubtitles: 'ADD_DATABASE_SUBTITLES',
   checkLocalSubtitles: 'CHECK_LOCAL_SUBTITLES',
   deleteSubtitlesByUuid: 'DELETE_SUBTITLES_BY_UUID',
+  deleteSubtitlesByHash: 'DELETE_SUBTITLES_BY_HASH',
   autoChangePrimarySubtitle: 'AUTO_CHANGE_PRIMARY_SUBTITLE',
   manualChangePrimarySubtitle: 'MANUAL_CHANGE_PRIMARY_SUBTITLE',
   autoChangeSecondarySubtitle: 'AUTO_CHANGE_SECONDARY_SUBTITLE',
diff --git a/src/renderer/store/modules/AudioTranslate.ts b/src/renderer/store/modules/AudioTranslate.ts
index 5e30d164e1..0b18dc870f 100644
--- a/src/renderer/store/modules/AudioTranslate.ts
+++ b/src/renderer/store/modules/AudioTranslate.ts
@@ -356,9 +356,10 @@ const actions = {
           commit(m.AUDIO_TRANSLATE_UPDATE_PROGRESS, 0);
           const selectId = state.selectedTargetSubtitleId;
           if (getters.primarySubtitleId === selectId) {
-            dispatch(smActions.manualChangePrimarySubtitle, '');
+            // do not directly pass empty string to manualChangeSubtitle
+            dispatch(smActions.autoChangePrimarySubtitle, '');
           } else if (getters.secondarySubtitleId === selectId) {
-            dispatch(smActions.manualChangeSecondarySubtitle, '');
+            dispatch(smActions.autoChangeSecondarySubtitle, '');
           }
           const failBubbleId = uuidv4();
           commit(m.AUDIO_TRANSLATE_UPDATE_FAIL_BUBBLE_ID, failBubbleId);
@@ -596,9 +597,10 @@ const actions = {
     // 丢弃任务，执行用户强制操作
     const selectId = state.selectedTargetSubtitleId;
     if (getters.primarySubtitleId === selectId) {
-      dispatch(smActions.manualChangePrimarySubtitle, '');
+      // do not directly pass empty string to manualChangeSubtitle
+      dispatch(smActions.autoChangePrimarySubtitle, '');
     } else if (getters.secondarySubtitleId === selectId) {
-      dispatch(smActions.manualChangeSecondarySubtitle, '');
+      dispatch(smActions.autoChangeSecondarySubtitle, '');
     }
     commit(m.AUDIO_TRANSLATE_RECOVERY);
     state.callbackAfterBubble();
diff --git a/src/renderer/store/modules/Subtitle.ts b/src/renderer/store/modules/Subtitle.ts
index 5af6d6d37d..823dd6c885 100644
--- a/src/renderer/store/modules/Subtitle.ts
+++ b/src/renderer/store/modules/Subtitle.ts
@@ -1,298 +1,265 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { cloneDeep } from 'lodash';
 import {
-  IEntityGenerator, Entity, IParser, Type, Format, IOrigin, defaultEntity, SubtitleControlListItem,
+  MutationTree, GetterTree, ActionTree,
+  Module,
+} from 'vuex';
+import {
+  IEntityGenerator, IParser, Format, IOrigin, ILoader, IEntity,
 } from '@/interfaces/ISubtitle';
 import { LanguageCode } from '@/libs/language';
-import {
-  storeSubtitle, removeSubtitle, removeSubtitleItemsFromList, cacheSubtitle,
-} from '@/services/storage/subtitle';
+import { storeSubtitle } from '@/services/storage/subtitle';
 import { newSubtitle as m } from '@/store/mutationTypes';
-import { newSubtitle as a, SubtitleManager as parentActions } from '@/store/actionTypes';
-import { getParser, sourceToFormat } from '@/services/subtitle/utils';
+import { newSubtitle as a } from '@/store/actionTypes';
+import { getParser, getLoader } from '@/services/subtitle/utils';
 import { SubtitleUploadParameter } from '@/services/subtitle';
 import { generateHints } from '@/libs/utils';
 import upload from '@/services/subtitle/upload';
-import { addBubble } from '../../helpers/notificationControl';
-import { NOT_SUPPORTED_SUBTITLE } from '../../helpers/notificationcodes';
-import store from '..';
-import { isCachedSubtitle, removeCachedSubtitle } from '@/services/storage/subtitle/file';
+import { VideoTimeSegments } from '@/libs/TimeSegments';
 
-type SubtitleState = {
-  moduleId: string;
-  source: unknown;
-  realSource: unknown;
-  type?: Type;
-  format: Format;
+enum ErrorCodes {
+  REAL_SOURCE_MISSING = 'REAL_SOURCE_MISSING',
+  LOADER_MISSING = 'LOADER_MISSING',
+  PARSER_MISSING = 'PARSER_MISSING',
+  CANNOT_UPLOAD = 'CANNOT_UPLOAD',
+}
+interface ISubtitleState {
+  mediaHash: string;
+  id: string;
+  displaySource?: IOrigin;
+  realSource?: IOrigin;
   language: LanguageCode;
+  hash: string;
+  format: Format;
   delay: number;
+  // loader reactive properties
+  canCache: boolean;
+  canUpload: boolean;
+  fullyRead: boolean;
+  // parser reactive properties
+  autoUploaded: boolean;
   playedTime: number;
-  hash: string;
-};
-enum CacheStatus {
-  NOT_CACHED,
-  CACHING,
-  CACHED,
 }
-const subtitleMap: Map<string, {
-  entity: Entity;
-  loader: () => Promise<unknown>;
-  parser?: IParser;
-  cached: CacheStatus;
-}> = new Map();
+/**
+ * map to store loader and parser for each subtitle
+ * @summary
+ * We still need map because:
+ * - TypeScript's private properties are not really private.
+ * - Vue will add reactive getter/setter to every property, which is really annoying.
+ */
+const subtitleLoaderParserMap: Map<string, { loader?: ILoader, parser?: IParser }> = new Map();
 
-let autoUpload = false;
-const state = (): SubtitleState => ({
-  moduleId: '',
-  source: '',
-  realSource: '',
-  type: undefined,
+const state = (): ISubtitleState => ({
+  mediaHash: '',
+  id: '',
+  hash: '',
+  displaySource: undefined,
+  realSource: undefined,
   format: Format.Unknown,
   language: LanguageCode.Default,
   delay: 0,
-  hash: '',
+  canCache: false,
+  canUpload: false,
+  fullyRead: false,
+  autoUploaded: false,
   playedTime: 0,
 });
-const getters = {};
-const mutations = {
-  [m.setModuleId](state: SubtitleState, id: string) {
-    state.moduleId = id;
+const getters: GetterTree<ISubtitleState, {}> = {
+  entity(state): IEntity | undefined {
+    return state.displaySource && state.realSource && {
+      hash: state.hash,
+      displaySource: state.displaySource,
+      realSource: state.realSource,
+      format: state.format,
+      language: state.language,
+      delay: state.delay,
+    };
   },
-  [m.setSource](state: SubtitleState, source: unknown) {
-    state.source = source;
+  canCache(state): boolean {
+    return !!state.realSource && state.canCache && state.fullyRead;
   },
-  [m.setRealSource](state: SubtitleState, source: unknown) {
-    state.realSource = source;
+  canUpload(state): boolean {
+    return !!state.realSource && state.canUpload && state.fullyRead;
+  },
+  canAutoUpload(state, getters, rootState, rootGetters): boolean {
+    return (!state.autoUploaded && getters.canUpload)
+      && (state.playedTime >= 0.5 * rootGetters.duration);
+  },
+  getUploadParam(
+    state, getters, rootState, rootGetters,
+  ): (payload?: Buffer) => SubtitleUploadParameter {
+    return (payload?: Buffer) => ({
+      mediaIdentity: state.mediaHash,
+      languageCode: state.language,
+      format: state.format,
+      playedTime: state.playedTime,
+      totalTime: rootGetters.duration,
+      delay: state.delay * 1000,
+      hints: generateHints(rootGetters.originSrc),
+      transcriptIdentity: state.format === Format.Sagi ? state.hash : '',
+      payload: state.format !== Format.Sagi ? payload || '' : '',
+    });
+  },
+};
+const mutations: MutationTree<ISubtitleState> = {
+  [m.setMediaHash](state, hash: string) {
+    state.mediaHash = hash;
   },
-  [m.setType](state: SubtitleState, type: Type) {
-    state.type = type;
+  [m.setId](state, id: string) {
+    state.id = id;
+  },
+  [m.setHash](state, hash: string) {
+    state.hash = hash;
+  },
+  [m.setDisplaySource](state, source: IOrigin) {
+    state.displaySource = source;
+  },
+  [m.setRealSource](state, source: IOrigin) {
+    state.realSource = source;
   },
-  [m.setFormat](state: SubtitleState, format: Format) {
+  [m.setFormat](state, format: Format) {
     state.format = format;
   },
-  [m.setLanguage](state: SubtitleState, languageCode: LanguageCode) {
+  [m.setLanguage](state, languageCode: LanguageCode) {
     state.language = languageCode;
   },
-  [m.setDelay](state: SubtitleState, delayInSeconds: number) {
+  [m.setDelay](state, delayInSeconds: number) {
     state.delay = delayInSeconds;
   },
-  [m.setPlayedTime](state: SubtitleState, playedTime: number) {
-    state.playedTime = playedTime;
+  [m.setCanCache](state, canCache: boolean) {
+    state.canCache = canCache;
   },
-  [m.setHash](state: SubtitleState, hash: string) {
-    state.hash = hash;
+  [m.setCanUpload](state, canUpload: boolean) {
+    state.canUpload = canUpload;
+  },
+  [m.setFullyRead](state, fullyRead: boolean) {
+    state.fullyRead = fullyRead;
+  },
+  [m.setAutoUploaded](state, autoUploaded: boolean) {
+    state.autoUploaded = autoUploaded;
+  },
+  [m.setPlayedTime](state, time: number) {
+    state.playedTime = time;
   },
 };
-const actions = {
-  [a.initialize]({ commit }: any, moduleId: string) {
-    subtitleMap.set(moduleId, {
-      entity: cloneDeep(defaultEntity),
-      loader: () => Promise.resolve(),
-      parser: undefined,
-      cached: CacheStatus.NOT_CACHED,
-    });
-    commit(m.setModuleId, moduleId);
+const actions: ActionTree<ISubtitleState, {}> = {
+  [a.initialize]({ commit }, { id, mediaHash }: { id: string, mediaHash: string }) {
+    commit(m.setId, id);
+    commit(m.setMediaHash, mediaHash);
   },
-  async [a.add]({ commit, state }: any, generator: IEntityGenerator) {
-    const subtitle = subtitleMap.get(state.moduleId);
-    if (subtitle) {
-      subtitle.loader = generator.getPayload.bind(generator);
-      const { entity } = subtitle;
-      await Promise.all([
-        generator.getStoredSource
-          ? generator.getStoredSource()
-            .then((src) => {
-              entity.source = src;
-              return generator.getSource();
-            })
-            .then((src: IOrigin) => commit(m.setRealSource, src))
-          : generator.getSource().then((src: IOrigin) => {
-            entity.source = src;
-            commit(m.setRealSource, src);
-          }),
-        generator.getFormat().then((format) => {
-          entity.format = format;
-          commit(m.setFormat, format);
-        }),
-        generator.getLanguage().then((language) => {
-          entity.language = language;
-          commit(m.setLanguage, language);
-        }),
-        generator.getType().then((type) => {
-          entity.type = type;
-          commit(m.setType, type);
-        }),
-        generator.getHash().then((hash) => {
-          entity.hash = hash;
-          commit(m.setHash, hash);
-        }),
-        generator.getDelay ? generator.getDelay().then((delay) => {
-          entity.delay = delay;
-          commit(m.setDelay, delay);
-        }) : () => {},
-      ]);
-      if (isCachedSubtitle(entity.source)) subtitle.cached = CacheStatus.CACHED;
-      return entity;
-    }
-    throw new Error(`Subtitle ${state.moduleId} not found.`);
+  async [a.add]({ commit, getters, state }, generator: IEntityGenerator) {
+    await Promise.all([
+      generator.getHash().then((hash) => { commit(m.setHash, hash); }),
+      generator.getDisplaySource().then((src) => { commit(m.setDisplaySource, src); }),
+      generator.getRealSource().then((src) => { commit(m.setRealSource, src); }),
+      generator.getFormat().then((format) => { commit(m.setFormat, format); }),
+      generator.getLanguage().then((language) => { commit(m.setLanguage, language); }),
+      generator.getDelay().then((delay) => { commit(m.setDelay, delay); }),
+    ]);
+    subtitleLoaderParserMap.set(state.hash, {});
+    return getters.entity;
   },
-  async [a.load]({ state, dispatch }: any) {
-    const subtitle = subtitleMap.get(state.moduleId);
-    if (subtitle) {
-      const { entity, loader } = subtitle;
-      entity.payload = await loader();
-      // 如果是translate 按钮就skip
-      if (entity && !(entity.type === Type.Translated && entity.payload === '')) {
-        await dispatch(a.cache);
+  async [a.getDialogues]({
+    state, rootGetters, commit, dispatch, getters,
+  }, time: number) {
+    const subtitle = subtitleLoaderParserMap.get(state.hash);
+    if (state.realSource && subtitle) {
+      if (!subtitle.loader) {
+        subtitle.loader = getLoader(state.realSource);
+        subtitle.loader.on('cache', async (result) => {
+          commit(m.setCanCache, result);
+          if (result) {
+            const result = await dispatch(a.cache) as undefined | IOrigin;
+            if (result) {
+              commit(m.setRealSource, result);
+              storeSubtitle(getters.entity);
+            }
+          }
+        });
+        subtitle.loader.on('upload', result => commit(m.setCanUpload, result));
+        subtitle.loader.on('read', result => commit(m.setFullyRead, result));
       }
-    }
-  },
-  async [a.getDialogues]({ state, rootGetters, dispatch }: any, time: number) {
-    const subtitle = subtitleMap.get(state.moduleId);
-    const result = {
-      metadata: {},
-      dialogues: [],
-    };
-    if (subtitle) {
-      const { entity, parser } = subtitle;
-      if (!entity.payload) return result;
-      if (!parser) {
-        const realFormat = sourceToFormat(state.realSource);
-        subtitle.parser = getParser(realFormat, entity.payload);
-        try {
-          await subtitle.parser.parse();
-          entity.metadata = await subtitle.parser.getMetadata();
-          await dispatch(a.startWatchPlayedTime);
-        } catch (err) {
-          addBubble(NOT_SUPPORTED_SUBTITLE);
-          const subtitleToRemoveFromList = rootGetters.list
-            .find((sub: SubtitleControlListItem) => sub.id === state.moduleId);
-          store.dispatch(parentActions.deleteSubtitlesByUuid, [subtitleToRemoveFromList]);
-        }
+      if (subtitle.loader && !subtitle.parser) {
+        const videoSegments = new VideoTimeSegments(rootGetters.duration);
+        subtitle.parser = getParser(state.format, subtitle.loader, videoSegments);
       }
-      if (parser && parser.payload) {
+      if (subtitle.parser) {
         return {
-          metadata: {},
-          dialogues: await parser.getDialogues(time - state.delay),
+          metadata: await subtitle.parser.getMetadata(),
+          dialogues: await subtitle.parser.getDialogues(time - state.delay),
         };
       }
     }
-    return result;
-  },
-  async [a.store]({ state }: any) {
-    const subtitle = subtitleMap.get(state.moduleId);
-    if (subtitle) {
-      await storeSubtitle(subtitle.entity);
-    }
+    return { metadata: {}, dialogues: [] };
   },
-  async [a.cache]({ state }: any) {
-    const subtitle = subtitleMap.get(state.moduleId);
-    if (subtitle) {
-      if (subtitle.cached === CacheStatus.NOT_CACHED) {
-        subtitle.cached = CacheStatus.CACHING;
-        await cacheSubtitle(subtitle.entity);
-        subtitle.cached = CacheStatus.CACHED;
+  async [a.store]({ getters }) { return storeSubtitle(getters.entity); },
+  async [a.upload]({ state, getters, commit }) {
+    const subtitle = subtitleLoaderParserMap.get(state.hash);
+    if (getters.canAutoUpload && subtitle && subtitle.loader) {
+      if (state.format !== Format.Sagi) {
+        const payload = Buffer.from(await subtitle.loader.getPayload() as string);
+        return upload.add(getters.getUploadParam(payload))
+          .then(() => commit(m.setAutoUploaded, true));
       }
+      return upload.add(getters.getUploadParam())
+        .then(() => commit(m.setAutoUploaded, true));
     }
+    throw new Error(ErrorCodes.CANNOT_UPLOAD);
   },
-  async [a.delete]({ state, rootGetters }: any) {
-    const subtitleToRemoveFromList = rootGetters.list
-      .find((sub: SubtitleControlListItem) => sub.id === state.moduleId);
-    const { mediaHash } = store.state.SubtitleManager;
-    const subtitle = subtitleMap.get(state.moduleId);
-    if (subtitle) {
-      subtitleMap.delete(state.moduleId);
-      await removeSubtitle(subtitle.entity);
-      if (subtitle.cached) {
-        const cachedSource = await removeCachedSubtitle(subtitle.entity.hash);
-        if (cachedSource) await removeSubtitle({ ...subtitle.entity, source: cachedSource });
-      }
-    }
-    removeSubtitleItemsFromList([subtitleToRemoveFromList], mediaHash);
+  [a.pause]({ state }) {
+    const subtitle = subtitleLoaderParserMap.get(state.hash);
+    if (subtitle && subtitle.loader) subtitle.loader.pause();
   },
-  async [a.upload]({ state, dispatch, rootGetters }: any) {
-    const subtitle = subtitleMap.get(state.moduleId);
-    if (subtitle && !autoUpload) {
-      const uploadParam: SubtitleUploadParameter = {
-        mediaIdentity: rootGetters.mediaHash,
-        languageCode: state.language,
-        format: state.format,
-        playedTime: state.playedTime,
-        totalTime: rootGetters.duration,
-        delay: state.delay * 1000,
-        hints: await generateHints(rootGetters.originSrc),
-        transcriptIdentity: state.format === Format.Sagi ? state.hash : '',
-        payload: state.format === Format.Sagi ? '' : Buffer.from(subtitle.entity.payload as string),
-      };
-      const result = await upload.add(uploadParam);
-      dispatch(a.stopWatchPlayedTime);
-      return result;
-    }
-    throw new Error(`Subtitle ${state.moduleId} not found.`);
+  [a.resume]({ state }) {
+    const subtitle = subtitleLoaderParserMap.get(state.hash);
+    if (subtitle && subtitle.loader) subtitle.loader.getPayload();
   },
-  async [a.manualUpload]({ state, rootGetters }: any) {
-    const subtitle = subtitleMap.get(state.moduleId);
-    if (subtitle) {
-      const uploadParam: SubtitleUploadParameter = {
-        mediaIdentity: rootGetters.mediaHash,
-        languageCode: state.language,
-        format: state.format,
-        playedTime: state.playedTime,
-        totalTime: rootGetters.duration,
-        delay: state.delay * 1000,
-        hints: await generateHints(rootGetters.originSrc),
-        transcriptIdentity: state.format === Format.Sagi ? state.hash : '',
-        payload: state.format === Format.Sagi ? '' : Buffer.from(subtitle.entity.payload as string),
-      };
-      return upload.addManually(uploadParam);
-    }
-    throw new Error(`Subtitle ${state.moduleId} not found.`);
+  async [a.cache]({ state }) {
+    const subtitle = subtitleLoaderParserMap.get(state.hash);
+    if (getters.canCache && subtitle && subtitle.loader) return subtitle.loader.cache();
+    return undefined;
   },
-  // played time actions
-  async [a.updatePlayedTime]({ state, commit }: any, times: { last: number, current: number }) {
-    const subtitle = subtitleMap.get(state.moduleId);
-    if (subtitle) {
-      const { entity, parser } = subtitle;
-      if (entity.payload && parser && parser.payload) {
-        // @ts-ignore
-        const playedTime = await subtitle.parser.updateVideoSegments(...Object.values(times));
-        if (playedTime !== state.playedTime) commit(m.setPlayedTime, playedTime);
+  async [a.manualUpload]({ state, getters }) {
+    const subtitle = subtitleLoaderParserMap.get(state.hash);
+    if (getters.canUpload && subtitle && subtitle.loader) {
+      if (state.format !== Format.Sagi) {
+        const payload = Buffer.from(await subtitle.loader.getPayload() as string);
+        return upload.addManually(getters.getUploadParam(payload));
       }
+      return upload.addManually(getters.getUploadParam());
     }
+    throw new Error(ErrorCodes.CANNOT_UPLOAD);
   },
-  [a.startWatchPlayedTime]({ state, rootGetters, commit }: any) {
-    const subtitle = subtitleMap.get(state.moduleId);
-    if (subtitle && !autoUpload) {
-      const { entity, parser } = subtitle;
-      if (entity.payload && parser && parser.payload) {
-        parser.getVideoSegments(rootGetters.duration);
-        commit(m.setPlayedTime, 0);
-      }
+  // played time actions
+  async [a.updatePlayedTime]({ state, commit }, times: { start: number, end: number }) {
+    const subtitle = subtitleLoaderParserMap.get(state.hash);
+    if (subtitle && subtitle.parser) {
+      subtitle.parser.videoSegments.updatePlayed(times.end, times.start);
+      commit(m.setPlayedTime, subtitle.parser.videoSegments.playedTime);
     }
   },
-  [a.stopWatchPlayedTime]() {
-    autoUpload = true;
-  },
-  [a.alterDelay]({ state, commit }: any, deltaInSeconds: number) {
-    const subtitle = subtitleMap.get(state.moduleId);
-    if (subtitle) {
-      const alfterAltered = +(state.delay + deltaInSeconds).toFixed(1);
-      if (Math.abs(alfterAltered) < 10000) {
-        commit(m.setDelay, alfterAltered);
-        subtitle.entity.delay = alfterAltered;
-      }
+  // subtitle delay actions
+  [a.alterDelay]({ state, commit }, deltaInSeconds: number) {
+    const alfterAltered = +(state.delay + deltaInSeconds).toFixed(1);
+    if (Math.abs(alfterAltered) < 10000) {
+      commit(m.setDelay, alfterAltered);
     }
     return state.delay;
   },
-  [a.resetDelay]({ commit }: any) {
+  [a.resetDelay]({ commit }) {
     commit(m.setDelay, 0);
   },
+  async [a.destroy]({ state }) {
+    const subtitle = subtitleLoaderParserMap.get(state.hash);
+    if (subtitle && subtitle.loader) await subtitle.loader.destroy();
+    subtitleLoaderParserMap.delete(state.id);
+  },
 };
 
-export default {
+const Subtitle: Module<ISubtitleState, {}> = {
   namespaced: true,
   state,
   getters,
   mutations,
   actions,
 };
+
+export default Subtitle;
diff --git a/src/renderer/store/modules/SubtitleManager.ts b/src/renderer/store/modules/SubtitleManager.ts
index 1498e404ab..9e7cd87822 100644
--- a/src/renderer/store/modules/SubtitleManager.ts
+++ b/src/renderer/store/modules/SubtitleManager.ts
@@ -1,7 +1,10 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  MutationTree, GetterTree, ActionTree,
+  Module, ActionContext,
+} from 'vuex';
 import uuidv4 from 'uuid/v4';
 import {
-  isEqual, sortBy, differenceWith, flatten, remove, debounce, pick,
+  isEqual, sortBy, differenceWith, flatten, remove, debounce, difference,
 } from 'lodash';
 import Vue from 'vue';
 import { extname } from 'path';
@@ -15,12 +18,12 @@ import {
   AudioTranslate as atActions,
 } from '@/store/actionTypes';
 import {
-  SubtitleControlListItem, Type, IEntityGenerator, Entity, NOT_SELECTED_SUBTITLE,
+  ISubtitleControlListItem, Type, IEntityGenerator, IEntity, NOT_SELECTED_SUBTITLE,
 } from '@/interfaces/ISubtitle';
 import {
   TranscriptInfo,
   searchForLocalList, retrieveEmbeddedList, fetchOnlineList,
-  OnlineGenerator, LocalGenerator, EmbeddedGenerator, TranslatedGenerator, IEmbeddedOrigin,
+  OnlineGenerator, LocalGenerator, EmbeddedGenerator, TranslatedGenerator,
 } from '@/services/subtitle';
 import { generateHints, calculatedName } from '@/libs/utils';
 import { log } from '@/libs/Log';
@@ -41,6 +44,7 @@ import { LanguageCode } from '@/libs/language';
 import { AudioTranslateBubbleOrigin } from './AudioTranslate';
 import { ISubtitleStream } from '@/plugins/mediaTasks';
 import { isAIEnabled } from '@/helpers/featureSwitch';
+import { IEmbeddedOrigin } from '@/services/subtitle/utils/loaders';
 
 const sortOfTypes = {
   local: 0,
@@ -51,63 +55,79 @@ const sortOfTypes = {
 
 let unwatch: Function;
 
-type SubtitleManagerState = {
-  mediaHash: string,
-  primarySubtitleId: string,
-  secondarySubtitleId: string,
-  isRefreshing: boolean,
-  allSubtitles: { [id: string]: SubtitleControlListItem },
-  primaryDelay: number,
-  secondaryDelay: number,
+interface ISubtitleManagerState {
+  mediaHash: string;
+  primarySubtitleId: string;
+  secondarySubtitleId: string;
+  isRefreshing: boolean;
+  allSubtitles: { [id: string]: IEntity };
+  primaryDelay: number;
+  secondaryDelay: number;
 }
 const state = {
   mediaHash: '',
-  primarySubtitleId: '',
-  secondarySubtitleId: '',
   isRefreshing: false,
   allSubtitles: {},
+  primarySubtitleId: '',
+  secondarySubtitleId: '',
   primaryDelay: 0,
   secondaryDelay: 0,
 };
-const getters = {
-  list(state: SubtitleManagerState) {
-    const list = Object.values(state.allSubtitles).filter(v => !!v);
-    return sortBy(list, (sub: SubtitleControlListItem) => {
-      if ((sub.type === Type.Online || sub.type === Type.Translated)
+const getters: GetterTree<ISubtitleManagerState, {}> = {
+  list(state): ISubtitleControlListItem[] {
+    const list = Object.keys(state.allSubtitles)
+      .filter(id => state.allSubtitles[id])
+      .map(id => ({ id, sub: state.allSubtitles[id] }));
+    const controlList = sortBy(list, ({ sub }) => {
+      const { type } = sub.displaySource;
+      if ((type === Type.Online || type === Type.Translated)
         && sub.language !== store.getters.primaryLanguage) {
-        return sortOfTypes[sub.type] + 2;
+        return sortOfTypes[type] + 2;
       }
-      return sortOfTypes[sub.type];
-    }).map((sub: SubtitleControlListItem) => ({
-      ...sub,
-      name: calculatedName(sub, list),
+      if (type === Type.Embedded) {
+        const embeddedRank = (sub.displaySource as IEmbeddedOrigin).source.streamIndex / 10;
+        return sortOfTypes[type] + embeddedRank;
+      }
+      return sortOfTypes[type];
+    }).map(({ id, sub }) => ({
+      id,
+      hash: sub.hash,
+      language: sub.language,
+      source: sub.displaySource,
+      type: sub.displaySource.type,
     }));
-  },
-  primarySubtitleId(state: SubtitleManagerState): string { return state.primarySubtitleId; },
-  secondarySubtitleId(state: SubtitleManagerState): string { return state.secondarySubtitleId; },
-  isRefreshing(state: SubtitleManagerState): boolean { return state.isRefreshing; },
-  ableToPushCurrentSubtitle(state: SubtitleManagerState): boolean {
-    let enable = false;
-    if (state.primarySubtitleId || state.secondarySubtitleId) {
-      enable = true;
-    }
-    return enable;
-  },
-  primaryDelay({ primaryDelay }: SubtitleManagerState) { return primaryDelay; },
-  secondaryDelay({ secondaryDelay }: SubtitleManagerState) { return secondaryDelay; },
-  calculatedNoSub(state: SubtitleManagerState, { list }: any) { return !list.length; },
+    return controlList.map(sub => ({ ...sub, name: calculatedName(sub, controlList) }));
+  },
+  primarySubtitleId(state): string { return state.primarySubtitleId; },
+  secondarySubtitleId(state): string { return state.secondarySubtitleId; },
+  isRefreshing(state): boolean { return state.isRefreshing; },
+  ableToPushCurrentSubtitle(state, getters, rootState): boolean {
+    const { primarySubtitleId: pid, secondarySubtitleId: sid } = state;
+    return (((store.hasModule(sid) || store.hasModule(pid))
+      && ((!store.hasModule(pid) || rootState[pid].canUpload)))
+      && ((!store.hasModule(sid) || rootState[sid].canUpload)));
+  },
+  primaryDelay({ primaryDelay }) { return primaryDelay; },
+  secondaryDelay({ secondaryDelay }) { return secondaryDelay; },
+  calculatedNoSub(state, { list }) { return !list.length; },
 };
-const mutations = {
-  [m.setMediaHash](state: SubtitleManagerState, hash: string) {
+const mutations: MutationTree<ISubtitleManagerState> = {
+  [m.setMediaHash](state, hash: string) {
     state.mediaHash = hash;
   },
-  [m.setPrimarySubtitleId](state: SubtitleManagerState, id: string) {
+  [m.setPrimarySubtitleId](state, id: string) {
+    const lastId = state.primarySubtitleId;
     state.primarySubtitleId = id;
+    if (store.hasModule(lastId)) store.dispatch(`${lastId}/${subActions.pause}`);
+    if (store.hasModule(id)) store.dispatch(`${id}/${subActions.resume}`);
   },
-  [m.setSecondarySubtitleId](state: SubtitleManagerState, id: string) {
+  [m.setSecondarySubtitleId](state, id: string) {
+    const lastId = state.secondarySubtitleId;
     state.secondarySubtitleId = id;
+    if (store.hasModule(lastId)) store.dispatch(`${lastId}/${subActions.pause}`);
+    if (store.hasModule(id)) store.dispatch(`${id}/${subActions.resume}`);
   },
-  [m.setNotSelectedSubtitle](state: SubtitleManagerState, subtitle?: 'primary' | 'secondary') {
+  [m.setNotSelectedSubtitle](state, subtitle?: 'primary' | 'secondary') {
     if (subtitle === 'primary') state.primarySubtitleId = NOT_SELECTED_SUBTITLE;
     else if (subtitle === 'secondary') state.secondarySubtitleId = NOT_SELECTED_SUBTITLE;
     else {
@@ -115,26 +135,25 @@ const mutations = {
       state.secondarySubtitleId = NOT_SELECTED_SUBTITLE;
     }
   },
-  [m.setIsRefreshing](state: SubtitleManagerState, isRefreshing: boolean) {
+  [m.setIsRefreshing](state, isRefreshing: boolean) {
     state.isRefreshing = isRefreshing;
   },
-  [m.addSubtitleId](state: SubtitleManagerState, controlItem: SubtitleControlListItem) {
-    const { id } = controlItem;
-    Vue.set(state.allSubtitles, id, controlItem);
+  [m.addSubtitleId](state, { id, entity }: { id: string, entity: IEntity }) {
+    Vue.set(state.allSubtitles, id, entity);
     const { primarySubtitleId, secondarySubtitleId } = state;
     if (primarySubtitleId && !state.allSubtitles[primarySubtitleId]) state.primarySubtitleId = '';
     if (secondarySubtitleId && !state.allSubtitles[secondarySubtitleId]) state.secondarySubtitleId = '';
   },
-  [m.deleteSubtitleId](state: SubtitleManagerState, id: string) {
+  [m.deleteSubtitleId](state, id: string) {
     Vue.set(state.allSubtitles, id, undefined);
+    delete state.allSubtitles[id];
   },
-  [m.deletaAllSubtitleIds](state: SubtitleManagerState) { state.allSubtitles = {}; },
-  [m.setPrimaryDelay](state: SubtitleManagerState, delayInSeconds: number) {
+  [m.setPrimaryDelay](state, delayInSeconds: number) {
     state.primaryDelay = delayInSeconds;
     const subtitle = state.allSubtitles[state.primarySubtitleId];
     if (subtitle) subtitle.delay = delayInSeconds;
   },
-  [m.setSecondaryDelay](state: SubtitleManagerState, delayInSeconds: number) {
+  [m.setSecondaryDelay](state, delayInSeconds: number) {
     state.secondaryDelay = delayInSeconds;
     const subtitle = state.allSubtitles[state.secondarySubtitleId];
     if (subtitle) subtitle.delay = delayInSeconds;
@@ -163,7 +182,7 @@ function setDelayTimeout() {
   clearTimeout(alterDelayTimeoutId);
   alterDelayTimeoutId = setTimeout(() => store.dispatch(a.storeSubtitleDelays), 10000);
 }
-function fetchOnlineListWraper(
+function fetchOnlineListWrapper(
   bubble: boolean,
   videoSrc: string,
   languageCode: LanguageCode,
@@ -187,28 +206,28 @@ function fetchOnlineListWraper(
     }
   });
 }
-function initializeManager({ getters, commit, dispatch }: any) {
-  const list = getters.list as SubtitleControlListItem[];
-  list.forEach(s => dispatch(a.removeSubtitle, s.id));
+function initializeManager(context: ActionContext<ISubtitleManagerState, {}>) {
+  const { commit, dispatch, getters } = context;
   commit(m.setMediaHash, getters.mediaHash);
   dispatch(a.refreshSubtitlesInitially);
 }
+
 const debouncedInitializeManager = debounce(initializeManager, 1000);
-const actions = {
-  async [a.initializeManager](context: any) {
+const actions: ActionTree<ISubtitleManagerState, {}> = {
+  async [a.initializeManager](context) {
     debouncedInitializeManager(context);
   },
-  [a.resetManager]({ commit }: any) {
+  async [a.resetManager]({ commit, dispatch }) {
     commit(m.setMediaHash, '');
     commit(m.setNotSelectedSubtitle);
     commit(m.setIsRefreshing, false);
-    commit(m.deletaAllSubtitleIds);
     primarySelectionComplete = false;
     secondarySelectionComplete = false;
+    await Promise.all(Object.keys(state.allSubtitles).map(id => dispatch(a.removeSubtitle, id)));
   },
   async [a.refreshSubtitlesInitially]({
     state, getters, dispatch, commit,
-  }: any) {
+  }) {
     primarySelectionComplete = false;
     secondarySelectionComplete = false;
     commit(m.setIsRefreshing, true);
@@ -296,7 +315,7 @@ const actions = {
   },
   async [a.refreshSubtitles]({
     state, getters, dispatch, commit,
-  }: any) {
+  }) {
     const {
       originSrc, isTranslating,
       primaryLanguage, secondaryLanguage,
@@ -339,7 +358,7 @@ const actions = {
   },
   // 这个方法仅仅给智能翻译成功后去加载另外一个AI翻译
   async [a.fetchSubtitleWhenTrabslateSuccess](
-    { getters, dispatch, state }: any, languageCode: LanguageCode,
+    { getters, dispatch, state }, languageCode: LanguageCode,
   ) {
     const {
       mediaHash,
@@ -348,17 +367,17 @@ const actions = {
       originSrc,
     } = getters;
     const hints = generateHints(originSrc);
-    fetchOnlineListWraper(false, originSrc, languageCode, hints)
+    fetchOnlineListWrapper(false, originSrc, languageCode, hints)
       .then(async (resultsList) => {
         const results = flatten(resultsList);
         const newSubtitlesToAdd: TranscriptInfo[] = [];
-        const oldSubtitlesToDel: SubtitleControlListItem[] = [];
-        const oldSubtitles = [...(getters as { list: SubtitleControlListItem[] }).list];
+        const oldSubtitlesToDel: IEntity[] = [];
+        const oldSubtitles = [...Object.values(state.allSubtitles)];
         // 删除这个语言已经加载的字幕
         const lastSubs = remove(
           oldSubtitles,
-          ({ type, language }) => (
-            (type === Type.Translated || type === Type.Online)
+          ({ displaySource: s, language }) => (
+            (s.type === Type.Translated || s.type === Type.Online)
             && language === languageCode
           ),
         );
@@ -385,11 +404,11 @@ const actions = {
           });
         }
         await dispatch(a.addOnlineSubtitles, { mediaHash, source: result.add })
-          .then(() => dispatch(a.deleteSubtitlesByUuid, result.delete));
+          .then(() => dispatch(a.deleteSubtitlesByHash, result.delete.map(({ hash }) => hash)));
       });
   },
   async [a.refreshOnlineSubtitles](
-    { getters, dispatch }: any,
+    { getters, dispatch },
     { mediaHash, bubble }: { mediaHash: string, bubble: boolean },
   ) {
     const {
@@ -399,13 +418,13 @@ const actions = {
     if (bubble) addBubble(ONLINE_LOADING);
     const hints = generateHints(originSrc);
     return Promise.all([
-      fetchOnlineListWraper(!!bubble, originSrc, primaryLanguage, hints),
-      fetchOnlineListWraper(!!bubble, originSrc, secondaryLanguage, hints),
+      fetchOnlineListWrapper(!!bubble, originSrc, primaryLanguage, hints),
+      fetchOnlineListWrapper(!!bubble, originSrc, secondaryLanguage, hints),
     ]).then(async (resultsList) => {
       const results = flatten(resultsList);
       const newSubtitlesToAdd: TranscriptInfo[] = [];
-      const oldSubtitlesToDel: SubtitleControlListItem[] = [];
-      const oldSubtitles = [...(getters as { list: SubtitleControlListItem[] }).list];
+      const oldSubtitlesToDel: ISubtitleControlListItem[] = [];
+      const oldSubtitles: ISubtitleControlListItem[] = [...getters.list];
 
       // 将Translated类型的都删除掉
       const translatedSubs = remove(oldSubtitles, ({
@@ -438,12 +457,12 @@ const actions = {
       let addSecondaryAIButton = false;
       const oldPrimarySubs = oldSubtitles
         .filter((
-          sub: SubtitleControlListItem,
+          sub: ISubtitleControlListItem,
         ) => (sub.type === Type.Online || sub.type === Type.Translated)
           && sub.language === primaryLanguage);
       const oldSecondarySubs = oldSubtitles
         .filter((
-          sub: SubtitleControlListItem,
+          sub: ISubtitleControlListItem,
         ) => (sub.type === Type.Online || sub.type === Type.Translated)
           && sub.language === secondaryLanguage);
       // sagi 结果
@@ -452,10 +471,10 @@ const actions = {
       const secondaryResults = results
         .filter((info: TranscriptInfo) => info.languageCode === secondaryLanguage);
       const oldPrimaryAISubs = oldPrimarySubs.filter((
-        sub: SubtitleControlListItem,
+        sub: ISubtitleControlListItem,
       ) => sub.type === Type.Translated);
       const oldSecondaryAISubs = oldSecondarySubs.filter((
-        sub: SubtitleControlListItem,
+        sub: ISubtitleControlListItem,
       ) => sub.type === Type.Translated);
       const isAllPrimaryResultsFromES = primaryResults
         .every((info: TranscriptInfo) => info.tagsList.length > 0 && info.tagsList.indexOf('ES') > -1);
@@ -518,20 +537,24 @@ const actions = {
         });
       }
       await dispatch(a.addOnlineSubtitles, { mediaHash, source: result.add })
-        .then(() => dispatch(a.deleteSubtitlesByUuid, result.delete));
+        .then(() => dispatch(a.deleteSubtitlesByUuid, result.delete.map(({ id }) => id)));
     });
   },
-  [a.checkLocalSubtitles]({ dispatch, getters }: any) {
-    const list = getters.list as SubtitleControlListItem[];
-    const localInvalidSubtitles = list
-      .filter(({ type, source }) => type === Type.Local && !existsSync(source as string));
-    if (localInvalidSubtitles.length) {
-      dispatch(a.deleteSubtitlesByUuid, localInvalidSubtitles)
+  [a.checkLocalSubtitles]({ state, dispatch }) {
+    const localInvalidSubtitleIds = Object.keys(state.allSubtitles)
+      .filter(id => state.allSubtitles[id])
+      .filter((id) => {
+        const subtitle = state.allSubtitles[id];
+        const source = subtitle.displaySource;
+        return source && source.type === Type.Local && !existsSync(source.source as string);
+      });
+    if (localInvalidSubtitleIds.length) {
+      dispatch(a.deleteSubtitlesByUuid, localInvalidSubtitleIds)
         .then(() => addBubble(LOCAL_SUBTITLE_REMOVED));
     }
   },
   async [a.addLocalSubtitles](
-    { dispatch }: any,
+    { dispatch },
     { mediaHash, source = [] }: IAddSubtitlesOptions<string>,
   ) {
     return Promise.all(
@@ -541,7 +564,7 @@ const actions = {
       })),
     ).then(subtitles => addSubtitleItemsToList(subtitles, mediaHash));
   },
-  async [a.addLocalSubtitlesWithSelect]({ state, dispatch, getters }: any, paths: string[]) {
+  async [a.addLocalSubtitlesWithSelect]({ state, dispatch, getters }, paths: string[]) {
     let selectedHash = paths[0];
     const { mediaHash } = state;
     // tempoary solution, need db validation schema to ensure data consistent
@@ -554,16 +577,13 @@ const actions = {
               selectedHash = await g.getHash();
             } catch (ex) { console.error(ex); }
           }
-          return dispatch(a.addSubtitle, {
-            generator: g,
-            mediaHash,
-          });
+          return dispatch(a.addSubtitle, { generator: g, mediaHash });
         }),
       )
-        .then((list: SubtitleControlListItem[]) => addSubtitleItemsToList(list, state.mediaHash))
+        .then((list: IEntity[]) => addSubtitleItemsToList(list, state.mediaHash))
         .then(() => {
           const sub = getters.list
-            .find((sub: SubtitleControlListItem) => sub.hash === selectedHash);
+            .find((sub: ISubtitleControlListItem) => sub.hash === selectedHash);
           if (sub && getters.isFirstSubtitle) {
             dispatch(a.manualChangePrimarySubtitle, sub.id);
           } else if (sub && !getters.isFirstSubtitle) {
@@ -574,7 +594,7 @@ const actions = {
     return {};
   },
   async [a.addEmbeddedSubtitles](
-    { dispatch }: any,
+    { dispatch },
     { mediaHash, source = [] }: IAddSubtitlesOptions<[string, ISubtitleStream]>,
   ) {
     return Promise.all(
@@ -585,7 +605,7 @@ const actions = {
     ).then(subtitles => addSubtitleItemsToList(subtitles, mediaHash));
   },
   async [a.addOnlineSubtitles](
-    { dispatch }: any,
+    { dispatch },
     { mediaHash, source = [] }: IAddSubtitlesOptions<TranscriptInfo>,
   ) {
     return Promise.all(
@@ -605,7 +625,7 @@ const actions = {
     ).then(subtitles => addSubtitleItemsToList(subtitles, mediaHash));
   },
   async [a.addDatabaseSubtitles](
-    { dispatch }: any,
+    { dispatch },
     { source = [], mediaHash }: IAddSubtitlesOptions<IStoredSubtitleItem>,
   ) {
     return Promise.all(
@@ -615,46 +635,23 @@ const actions = {
       })),
     );
   },
-  async [a.addSubtitle]({
-    state, commit, dispatch, getters,
-  }: any, options: IAddSubtitleOptions) {
+  async [a.addSubtitle]({ state, dispatch, commit }, options: IAddSubtitleOptions) {
     if (options.mediaHash === state.mediaHash) {
       const subtitleGenerator = options.generator;
       try {
-        const list = getters.list as SubtitleControlListItem[];
+        const list = Object.values(state.allSubtitles).filter(v => v);
         const hash = await subtitleGenerator.getHash();
-        const type = await subtitleGenerator.getType();
-        const existedHash = list.find(subtitle => subtitle.hash === hash && subtitle.type === type);
-        const source = subtitleGenerator.getStoredSource
-          ? await subtitleGenerator.getStoredSource()
-          : await subtitleGenerator.getSource();
-        const existedOrigin = list.find((subtitle) => {
-          if (source.type !== Type.Embedded) return isEqual(subtitle.source, source.source);
-          const storedSource = (source as IEmbeddedOrigin).source;
-          const newSource = (subtitle as IEmbeddedOrigin).source;
-          return isEqual(
-            pick(storedSource, ['streamIndex', 'extractedSrc']),
-            pick(newSource, ['streamIndex', 'extractedSrc']),
-          );
-        });
-        if (!existedHash || !existedOrigin) {
+        const source = await subtitleGenerator.getDisplaySource();
+        const existed = list
+          .find(subtitle => subtitle.hash === hash && isEqual(subtitle.displaySource, source));
+        if (!existed) {
           const id = uuidv4();
           store.registerModule([id], { ...SubtitleModule, name: `${id}` });
-          dispatch(`${id}/${subActions.initialize}`, id);
-          const subtitle: Entity = await dispatch(`${id}/${subActions.add}`, subtitleGenerator);
+          dispatch(`${id}/${subActions.initialize}`, { id, mediaHash: state.mediaHash });
+          const subtitle: IEntity = await dispatch(`${id}/${subActions.add}`, subtitleGenerator);
           await dispatch(`${id}/${subActions.store}`);
-          const subtitleControlListItem: SubtitleControlListItem = {
-            id,
-            hash: subtitle.hash,
-            type: subtitle.type,
-            language: subtitle.language,
-            source: subtitle.source.source,
-            delay: subtitle.delay,
-          };
-          if (options.mediaHash === state.mediaHash) {
-            commit(m.addSubtitleId, subtitleControlListItem);
-          }
-          return subtitleControlListItem;
+          commit(m.addSubtitleId, { id, entity: subtitle });
+          return subtitle;
         }
       } catch (ex) {
         log.warn('SubtitleManager addSubtitle action', ex);
@@ -662,25 +659,34 @@ const actions = {
     }
     return {};
   },
-  [a.removeSubtitle]({ commit, getters }: any, id: string) {
-    store.unregisterModule(id);
+  async [a.removeSubtitle]({ commit, getters, dispatch }, id: string) {
     commit(m.deleteSubtitleId, id);
     if (getters.isFirstSubtitle && getters.primarySubtitleId === id) {
       commit(m.setNotSelectedSubtitle, 'primary');
     } else if (!getters.isFirstSubtitle && getters.secondarySubtitleId === id) {
       commit(m.setNotSelectedSubtitle, 'secondary');
     }
+    if (store.hasModule(id)) {
+      await dispatch(`${id}/${subActions.destroy}`);
+      store.unregisterModule(id);
+    }
   },
-  async [a.deleteSubtitlesByUuid]({ state, dispatch }: any, subtitles: SubtitleControlListItem[]) {
-    subtitles.forEach(({ id }) => {
-      if (store.hasModule(id)) dispatch(`${id}/${subActions.delete}`);
-      dispatch(a.removeSubtitle, id);
-    });
-    return removeSubtitleItemsFromList(subtitles, state.mediaHash);
+  async [a.deleteSubtitlesByUuid]({ state, dispatch }, ids: string[]) {
+    ids.forEach(id => dispatch(a.removeSubtitle, id));
+    return removeSubtitleItemsFromList(ids.map(id => state.allSubtitles[id]), state.mediaHash);
+  },
+  async [a.deleteSubtitlesByHash]({ state, dispatch }, hashes: string[]) {
+    const { allSubtitles } = state;
+    const ids = hashes
+      .map(hash => Object.keys(allSubtitles).find(id => allSubtitles[id].hash === hash) || '')
+      .filter(id => id);
+    ids.forEach(id => dispatch(a.removeSubtitle, id));
+    return removeSubtitleItemsFromList(ids.map(id => state.allSubtitles[id]), state.mediaHash);
   },
   async [a.autoChangePrimarySubtitle]({
     dispatch, commit, getters, state,
-  }: any, id: string) {
+  }, id: string) {
+    const lastSelected = [state.primarySubtitleId, state.secondarySubtitleId];
     if (getters.subtitleOff) commit(m.setPrimarySubtitleId, '');
     else {
       const primaryId = id;
@@ -698,13 +704,20 @@ const actions = {
         if (state.allSubtitles[primaryId]) {
           commit(m.setPrimaryDelay, state.allSubtitles[primaryId].delay);
         }
-        if (store.hasModule(primaryId)) await dispatch(`${id}/${subActions.load}`);
       }
 
+      const finalSelected = [state.primarySubtitleId, state.secondarySubtitleId];
+      difference(lastSelected, finalSelected).forEach((id) => {
+        if (store.hasModule(id)) dispatch(`${id}/${subActions.pause}`);
+      });
+      difference(finalSelected, lastSelected).forEach((id) => {
+        if (store.hasModule(id)) dispatch(`${id}/${subActions.resume}`);
+      });
+
       dispatch(a.storeSelectedSubtitles, [primaryId, secondaryId]);
     }
   },
-  async [a.manualChangePrimarySubtitle]({ dispatch, commit, state }: any, id: string) {
+  async [a.manualChangePrimarySubtitle]({ dispatch, commit, state }, id: string) {
     await dispatch('setSubtitleOff', !id);
     if (!id) dispatch(a.autoChangeSecondarySubtitle, '');
     else if (!state.secondarySubtitleId) commit(m.setNotSelectedSubtitle, 'secondary');
@@ -712,7 +725,8 @@ const actions = {
   },
   async [a.autoChangeSecondarySubtitle]({
     dispatch, commit, getters, state,
-  }: any, id: string) {
+  }, id: string) {
+    const lastSelected = [state.primarySubtitleId, state.secondarySubtitleId];
     if (getters.subtitleOff) commit(m.setSecondarySubtitleId, '');
     else {
       let primaryId = state.primarySubtitleId;
@@ -730,38 +744,49 @@ const actions = {
         if (state.allSubtitles[secondaryId]) {
           commit(m.setSecondaryDelay, state.allSubtitles[secondaryId].delay);
         }
-        if (store.hasModule(secondaryId)) await dispatch(`${id}/${subActions.load}`);
       }
 
+      const finalSelected = [state.primarySubtitleId, state.secondarySubtitleId];
+      difference(lastSelected, finalSelected).forEach((id) => {
+        if (store.hasModule(id)) dispatch(`${id}/${subActions.pause}`);
+      });
+      difference(finalSelected, lastSelected).forEach((id) => {
+        if (store.hasModule(id)) dispatch(`${id}/${subActions.resume}`);
+      });
+
       dispatch(a.storeSelectedSubtitles, [primaryId, secondaryId]);
     }
   },
-  async [a.manualChangeSecondarySubtitle]({ dispatch, commit, state }: any, id: string) {
+  async [a.manualChangeSecondarySubtitle]({ dispatch, commit, state }, id: string) {
     await dispatch('setSubtitleOff', !id);
     if (!id) dispatch(a.autoChangePrimarySubtitle, '');
     else if (!state.primarySubtitleId) commit(m.setNotSelectedSubtitle, 'primary');
     dispatch(a.autoChangeSecondarySubtitle, id);
   },
-  async [a.storeSelectedSubtitles]({ state }: any, ids: string[]) {
+  async [a.storeSelectedSubtitles]({ state }, ids: string[]) {
     const { allSubtitles, mediaHash } = state;
     const subtitles = ids
+      .filter(id => state.allSubtitles[id])
+      .filter((id) => {
+        const source = state.allSubtitles[id].displaySource;
+        return source && source.type !== Type.Translated && source.source;
+      })
       .map((id) => {
-        const subtitle = allSubtitles[id];
-        if (subtitle && subtitle.type !== Type.Translated && subtitle.source) return subtitle;
-        return undefined;
+        const { hash, displaySource } = allSubtitles[id];
+        return { hash, source: displaySource };
       });
     storeSelectedSubtitles(subtitles as SelectedSubtitle[], mediaHash);
   },
   async [a.chooseSelectedSubtitles](
-    { getters, dispatch }: any,
+    { getters, dispatch },
     { primary, secondary }: { primary: SelectedSubtitle, secondary?: SelectedSubtitle },
   ) {
-    const { list } = getters as { list: SubtitleControlListItem[] };
+    const { list } = getters as { list: ISubtitleControlListItem[] };
     let primaryId = '';
     let secondaryId = '';
     if (primary) {
       let subtitles = list
-        .filter((sub: SubtitleControlListItem) => sub.hash === primary.hash);
+        .filter((sub: ISubtitleControlListItem) => sub.hash === primary.hash);
       if (subtitles.length > 1) {
         subtitles = subtitles.filter(sub => isEqual(sub.source, primary.source));
       }
@@ -769,7 +794,7 @@ const actions = {
     }
     if (secondary) {
       let subtitles = list
-        .filter((sub: SubtitleControlListItem) => sub.hash === secondary.hash);
+        .filter((sub: ISubtitleControlListItem) => sub.hash === secondary.hash);
       if (subtitles.length > 1) {
         subtitles = subtitles.filter(sub => isEqual(sub.source, secondary.source));
       }
@@ -783,9 +808,9 @@ const actions = {
       secondarySelectionComplete = true;
     });
   },
-  async [a.startAISelection]({ dispatch }: any) {
+  async [a.startAISelection]({ dispatch }) {
     unwatch = store.watch(
-      (state: any, getters: { list: SubtitleControlListItem[] }) => getters.list
+      (state: ISubtitleManagerState, getters: { list: ISubtitleControlListItem[] }) => getters.list
         .map(({
           id, type, source, language,
         }) => ({
@@ -794,8 +819,8 @@ const actions = {
       () => dispatch(a.checkSubtitleList),
     );
   },
-  [a.checkSubtitleList]({ getters, dispatch, commit }: any) {
-    const { list } = getters as { list: SubtitleControlListItem[] };
+  [a.checkSubtitleList]({ getters, dispatch, commit }) {
+    const { list } = getters as { list: ISubtitleControlListItem[] };
     if (list.length) {
       const { primaryLanguage, secondaryLanguage } = getters;
       if (!primarySelectionComplete || !secondarySelectionComplete) {
@@ -830,7 +855,7 @@ const actions = {
   async [a.stopAISelection]() {
     if (typeof unwatch === 'function') unwatch();
   },
-  async [a.getCues]({ dispatch, getters }: any, time?: number) {
+  async [a.getCues]({ dispatch, getters }, time?: number) {
     const firstSub = {
       cues: [],
       subPlayResX: 720,
@@ -871,10 +896,10 @@ const actions = {
     return [firstSub, secondSub];
   },
   async [a.updatePlayedTime](
-    { state, dispatch, getters }: any,
+    { state, dispatch, getters },
     times: { start: number, end: number },
   ) {
-    const actions: Promise<any>[] = [];
+    const actions: Promise<unknown>[] = [];
     if (times.start !== times.end) {
       const { primarySubtitleId, secondarySubtitleId } = state;
       const bubbleId = `${Date.now()}-${Math.random()}`;
@@ -909,10 +934,10 @@ const actions = {
     }
     return Promise.all(actions);
   },
-  async [a.manualUploadAllSubtitles]({ state, dispatch }: any) {
+  async [a.manualUploadAllSubtitles]({ state, dispatch }) {
     if (navigator.onLine) {
       addBubble(SUBTITLE_UPLOAD);
-      const actions: Promise<any>[] = [];
+      const actions: Promise<boolean>[] = [];
       const { primarySubtitleId, secondarySubtitleId } = state;
       if (primarySubtitleId && store.hasModule(primarySubtitleId)) actions.push(dispatch(`${primarySubtitleId}/${subActions.manualUpload}`));
       if (secondarySubtitleId && store.hasModule(secondarySubtitleId)) actions.push(dispatch(`${secondarySubtitleId}/${subActions.manualUpload}`));
@@ -923,41 +948,43 @@ const actions = {
     }
     return addBubble(UPLOAD_FAILED);
   },
-  async [a.alterPrimaryDelay]({ state, dispatch, commit }: any, deltaInSeconds: number) {
+  async [a.alterPrimaryDelay]({ state, dispatch, commit }, deltaInSeconds: number) {
     const { primarySubtitleId } = state;
     if (!store.hasModule(primarySubtitleId)) return;
     const delay = await dispatch(`${primarySubtitleId}/${subActions.alterDelay}`, deltaInSeconds);
     commit(m.setPrimaryDelay, delay);
     setDelayTimeout();
   },
-  async [a.resetPrimaryDelay]({ state, dispatch, commit }: any) {
+  async [a.resetPrimaryDelay]({ state, dispatch, commit }) {
     const { primarySubtitleId } = state;
     await dispatch(`${primarySubtitleId}/${subActions.resetDelay}`);
     commit(m.setPrimaryDelay, 0);
     setDelayTimeout();
   },
-  async [a.alterSecondaryDelay]({ state, dispatch, commit }: any, deltaInSeconds: number) {
+  async [a.alterSecondaryDelay]({ state, dispatch, commit }, deltaInSeconds: number) {
     const { secondarySubtitleId } = state;
     const delay = await dispatch(`${secondarySubtitleId}/${subActions.alterDelay}`, deltaInSeconds);
     commit(m.setSecondaryDelay, delay);
     setDelayTimeout();
   },
-  async [a.resetSecondaryDelay]({ state, dispatch, commit }: any) {
+  async [a.resetSecondaryDelay]({ state, dispatch, commit }) {
     const { secondarySubtitleId } = state;
     await dispatch(`${secondarySubtitleId}/${subActions.resetDelay}`);
     commit(m.setSecondaryDelay, 0);
     setDelayTimeout();
   },
-  async [a.storeSubtitleDelays]({ getters, state }: any) {
+  async [a.storeSubtitleDelays]({ getters, state }) {
     const { list } = getters;
     const { mediaHash } = state;
     updateSubtitleList(list, mediaHash);
   },
 };
 
-export default {
+const SubtitleManager: Module<ISubtitleManagerState, {}> = {
   state,
   getters,
   mutations,
   actions,
 };
+
+export default SubtitleManager;
diff --git a/src/renderer/store/mutationTypes.js b/src/renderer/store/mutationTypes.js
index 02d6863576..5a878989ff 100644
--- a/src/renderer/store/mutationTypes.js
+++ b/src/renderer/store/mutationTypes.js
@@ -72,15 +72,19 @@ export const Subtitle = {
 };
 
 export const newSubtitle = {
-  setModuleId: 'SET_MODULE_ID',
-  setSource: 'SET_SOURCE',
+  setMediaHash: 'SET_MEDIA_HASH',
+  setId: 'SET_ID',
+  setDisplaySource: 'SET_DISPLAY_SOURCE',
   setRealSource: 'SET_REAL_SOURCE',
-  setType: 'SET_TYPE',
   setFormat: 'SET_FORMAT',
   setLanguage: 'SET_LANGUAGE',
   setDelay: 'SET_DELAY',
-  setPlayedTime: 'SET_PLAYED_TIME',
   setHash: 'SET_HASH',
+  setCanCache: 'SET_CAN_CACHE',
+  setCanUpload: 'SET_CAN_UPLOAD',
+  setFullyRead: 'SET_FULLY_READ',
+  setAutoUploaded: 'SET_AUTO_UPLOADED',
+  setPlayedTime: 'SET_PLAYED_TIME',
 };
 
 export const SubtitleManager = {
@@ -91,7 +95,6 @@ export const SubtitleManager = {
   setIsRefreshing: 'SET_IS_REFRESHING',
   addSubtitleId: 'ADD_SUBTITLE_ID',
   deleteSubtitleId: 'DELETE_SUBTITLE_ID',
-  deletaAllSubtitleIds: 'DELETE_ALL_SUBTITLE_IDS',
   setPrimaryDelay: 'SET_PRIMARY_DELAY',
   setSecondaryDelay: 'SET_SECONDARY_DELAY',
 };

From 3c3145c72a8483053ef399c113cd201bcf2edd8b Mon Sep 17 00:00:00 2001
From: Yan Yifeng <yanyifeng@splayer.org>
Date: Wed, 4 Sep 2019 18:41:38 +0800
Subject: [PATCH 074/123] fix(typo): fix old subtitle interfaces

Fix SubtitleControlListItem and IEmbeddedOrigin.
---
 src/main/menu/Menu.ts                         | 10 +++++-----
 src/main/menu/MenuService.ts                  |  6 +++---
 .../PlayingView/SubtitleControl.vue           | 20 +++++++++----------
 .../components/PlayingView/SubtitleList.vue   | 17 +++++++++-------
 src/renderer/libs/utils.ts                    | 20 +++++++++----------
 src/renderer/main.ts                          | 20 +++++++++----------
 src/renderer/store/modules/AudioTranslate.ts  | 14 ++++++-------
 src/renderer/store/modules/SubtitleManager.ts |  5 ++---
 8 files changed, 57 insertions(+), 55 deletions(-)

diff --git a/src/main/menu/Menu.ts b/src/main/menu/Menu.ts
index 954fef1529..79f0521712 100644
--- a/src/main/menu/Menu.ts
+++ b/src/main/menu/Menu.ts
@@ -16,7 +16,7 @@ import { isMacintosh, isWindowsExE, isMacintoshDMG } from '../../shared/common/p
 import Locale from '../../shared/common/localize';
 import menuTemplate from './menu.json';
 import { IMenuDisplayInfo } from '../../renderer/interfaces/IRecentPlay';
-import { SubtitleControlListItem, Type } from '../../renderer/interfaces/ISubtitle';
+import { ISubtitleControlListItem, Type } from '../../renderer/interfaces/ISubtitle';
 
 function separator(): Electron.MenuItem {
   return new MenuItem({ type: 'separator' });
@@ -45,12 +45,12 @@ export default class Menubar {
   private audioTracks: { id: string, label: string }[];
 
   private primarySubs: {
-    id: string, label: string, checked: boolean, subtitleItem: SubtitleControlListItem,
+    id: string, label: string, checked: boolean, subtitleItem: ISubtitleControlListItem,
   }[];
 
   private secondarySubs: {
     id: string, label: string, checked: boolean,
-    enabled: boolean, subtitleItem: SubtitleControlListItem,
+    enabled: boolean, subtitleItem: ISubtitleControlListItem,
   }[];
 
   private _routeName: string;
@@ -239,7 +239,7 @@ export default class Menubar {
 
   public updatePrimarySub(
     items?: {
-      id: string, label: string, checked: boolean, subtitleItem: SubtitleControlListItem,
+      id: string, label: string, checked: boolean, subtitleItem: ISubtitleControlListItem,
     }[],
   ) {
     if (items) this.primarySubs = items;
@@ -272,7 +272,7 @@ export default class Menubar {
   public updateSecondarySub(
     items?: {
       id: string, label: string, checked: boolean,
-      enabled: boolean, subtitleItem: SubtitleControlListItem,
+      enabled: boolean, subtitleItem: ISubtitleControlListItem,
     }[],
   ) {
     if (items) this.secondarySubs = items;
diff --git a/src/main/menu/MenuService.ts b/src/main/menu/MenuService.ts
index 67145fac55..9c0f91c025 100644
--- a/src/main/menu/MenuService.ts
+++ b/src/main/menu/MenuService.ts
@@ -1,7 +1,7 @@
 import { ipcMain } from 'electron';
 import Menu from './Menu';
 import { IMenuDisplayInfo } from '../../renderer/interfaces/IRecentPlay';
-import { SubtitleControlListItem } from '../../renderer/interfaces/ISubtitle';
+import { ISubtitleControlListItem } from '../../renderer/interfaces/ISubtitle';
 
 export default class MenuService {
   private menu: Menu;
@@ -30,10 +30,10 @@ export default class MenuService {
     ipcMain.on('update-recent-play', (e: Event, items: IMenuDisplayInfo[]) => {
       this.menu.updateRecentPlay(items);
     });
-    ipcMain.on('update-primary-sub', (e: Event, items: { id: string, label: string, checked: boolean, subtitleItem: SubtitleControlListItem }[]) => {
+    ipcMain.on('update-primary-sub', (e: Event, items: { id: string, label: string, checked: boolean, subtitleItem: ISubtitleControlListItem }[]) => {
       this.menu.updatePrimarySub(items);
     });
-    ipcMain.on('update-secondary-sub', (e: Event, items: { id: string, label: string, checked: boolean, enabled: boolean, subtitleItem: SubtitleControlListItem }[]) => {
+    ipcMain.on('update-secondary-sub', (e: Event, items: { id: string, label: string, checked: boolean, enabled: boolean, subtitleItem: ISubtitleControlListItem }[]) => {
       this.menu.updateSecondarySub(items);
     });
     ipcMain.on('update-audio-track', (e: Event, items: { id: string, label: string }[]) => {
diff --git a/src/renderer/components/PlayingView/SubtitleControl.vue b/src/renderer/components/PlayingView/SubtitleControl.vue
index 8292f2cab8..ce9cdea190 100644
--- a/src/renderer/components/PlayingView/SubtitleControl.vue
+++ b/src/renderer/components/PlayingView/SubtitleControl.vue
@@ -116,7 +116,7 @@ import {
   SubtitleManager as smActions,
   AudioTranslate as atActions,
 } from '@/store/actionTypes';
-import { SubtitleControlListItem, Type, NOT_SELECTED_SUBTITLE } from '@/interfaces/ISubtitle';
+import { ISubtitleControlListItem, Type, NOT_SELECTED_SUBTITLE } from '@/interfaces/ISubtitle';
 import lottie from '@/components/lottie.vue';
 import animationData from '@/assets/subtitle.json';
 import { INPUT_COMPONENT_TYPE } from '@/plugins/input';
@@ -207,9 +207,9 @@ export default {
       ) return -2;
       return !this.isFirstSubtitle && this.enabledSecondarySub
         ? computedAvailableItems
-          .findIndex((sub: SubtitleControlListItem) => sub.id === this.secondarySubtitleId)
+          .findIndex((sub: ISubtitleControlListItem) => sub.id === this.secondarySubtitleId)
         : computedAvailableItems
-          .findIndex((sub: SubtitleControlListItem) => sub.id === this.primarySubtitleId);
+          .findIndex((sub: ISubtitleControlListItem) => sub.id === this.primarySubtitleId);
     },
     noSubtitle() {
       if (this.animClass) {
@@ -223,7 +223,7 @@ export default {
     enabledSecondarySub(val: boolean) {
       if (!val) this.updateSubtitleType(true);
     },
-    list(val: SubtitleControlListItem[]) {
+    list(val: ISubtitleControlListItem[]) {
       val = flatMap(val
         .reduce((prev, currentSub) => {
           switch (currentSub.type) {
@@ -241,7 +241,7 @@ export default {
               break;
           }
           return prev;
-        }, [[], [], []] as SubtitleControlListItem[][])
+        }, [[], [], []] as ISubtitleControlListItem[][])
         .map((subList, index) => {
           switch (index) {
             default:
@@ -251,7 +251,7 @@ export default {
               return sortBy(subList, ({ source }) => source.streamIndex);
           }
         }));
-      this.computedAvailableItems = val.map((sub: SubtitleControlListItem) => ({
+      this.computedAvailableItems = val.map((sub: ISubtitleControlListItem) => ({
         ...sub,
         name: this.getSubName(sub, val),
       }));
@@ -461,16 +461,16 @@ export default {
         }
       }
     },
-    getSubName(item: SubtitleControlListItem) {
+    getSubName(item: ISubtitleControlListItem) {
       if (item.type === Type.Embedded) {
         return `${this.$t('subtitle.embedded')} ${item.name}`;
       }
       return item.name;
     },
-    changeSubtitle(item: SubtitleControlListItem) {
-      if (!navigator.onLine && item.type === Type.Translated && item.source === '') {
+    changeSubtitle(item: ISubtitleControlListItem) {
+      if (!navigator.onLine && item.type === Type.Translated && item.source.source === '') {
         addBubble(TRANSLATE_NO_LINE);
-      } else if (item.type === Type.Translated && item.source === '') {
+      } else if (item.type === Type.Translated && item.source.source === '') {
         this.showAudioTranslateModal(item);
         // ga 字幕面板中点击 "Generate" 的次数
         this.$ga.event('app', 'ai-translate-generate-button-click');
diff --git a/src/renderer/components/PlayingView/SubtitleList.vue b/src/renderer/components/PlayingView/SubtitleList.vue
index 78fb75e437..5ecccd9a58 100644
--- a/src/renderer/components/PlayingView/SubtitleList.vue
+++ b/src/renderer/components/PlayingView/SubtitleList.vue
@@ -42,7 +42,7 @@
               height: hoverIndex === index ?
                 `${itemHeight + hoverHeight}px` : `${itemHeight}px`,
               cursor: currentSubtitleIndex === index &&
-                !(item.type === 'translated' && item.source === '') ? 'default' : 'pointer',
+                !(item.type === 'translated' && item.source.source === '') ? 'default' : 'pointer',
               justifyContent: item.type === 'translated' ? 'space-between' : ''
             }"
             @mouseup="toggleItemClick($event, index)"
@@ -81,7 +81,7 @@
                 />
               </transition>
               <transition
-                v-if="item.type === 'translated' && item.source === ''
+                v-if="item.type === 'translated' && item.source.source === ''
                   && (item.language !== translateLanguage || translateProgress <= 0)"
                 name="sub-delete"
               >
@@ -93,8 +93,11 @@
                 </div>
               </transition>
               <div
-                v-else-if="translateProgress > 0 && item.type === 'translated' && item.source === ''
-                  && item.language === translateLanguage"
+                v-else-if="
+                  translateProgress > 0
+                    && item.type === 'translated' && item.source.source === ''
+                    && item.language === translateLanguage
+                "
                 class="translateProgress"
               >
                 <Progress
@@ -136,7 +139,7 @@
 
 <script lang="ts">
 import { INPUT_COMPONENT_TYPE } from '@/plugins/input';
-import { SubtitleControlListItem } from '@/interfaces/ISubtitle';
+import { ISubtitleControlListItem } from '@/interfaces/ISubtitle';
 import Icon from '../BaseIconContainer.vue';
 import Progress from './Progress.vue';
 
@@ -311,12 +314,12 @@ export default {
         }
       }
     },
-    handleSubDelete(e: MouseEvent, item: SubtitleControlListItem) {
+    handleSubDelete(e: MouseEvent, item: ISubtitleControlListItem) {
       if ((e.target as HTMLElement).nodeName !== 'DIV') {
         setTimeout(() => {
           this.$emit('update:transFlag', false);
           this.$emit('update:hoverHeight', 0);
-          this.$emit('remove-subtitle', [item]);
+          this.$emit('remove-subtitle', [item.id]);
         }, 0);
       }
     },
diff --git a/src/renderer/libs/utils.ts b/src/renderer/libs/utils.ts
index 4c4f22d06e..9f93b7d658 100644
--- a/src/renderer/libs/utils.ts
+++ b/src/renderer/libs/utils.ts
@@ -10,8 +10,7 @@ import axios, { AxiosResponse } from 'axios';
 import { promises as fsPromises } from 'fs';
 // @ts-ignore
 import nzh from 'nzh';
-import { SubtitleControlListItem, Type } from '@/interfaces/ISubtitle';
-import { IEmbeddedOrigin } from '@/services/subtitle';
+import { ISubtitleControlListItem, Type } from '@/interfaces/ISubtitle';
 import { version } from '@/../../package.json';
 import {
   ELECTRON_CACHE_DIRNAME,
@@ -20,6 +19,7 @@ import {
 } from '@/constants';
 import { codeToLanguageName, LanguageCode } from './language';
 import { checkPathExist, write, deleteDir } from './file';
+import { IEmbeddedOrigin } from '@/services/subtitle/utils/loaders';
 import { isBetaVersion } from '../../shared/common/platform';
 
 /**
@@ -202,29 +202,29 @@ export function generateHints(videoSrc: string): string {
 }
 
 export function calculatedName(
-  item: SubtitleControlListItem,
-  list: SubtitleControlListItem[],
+  item: ISubtitleControlListItem,
+  list: ISubtitleControlListItem[],
 ): string {
   let name = '';
   if (item.type === Type.Local) {
-    name = basename(item.source as string);
+    name = basename(item.source.source as string);
   } else if (item.type === Type.Embedded) {
     let embeddedList = list
-      .filter((s: SubtitleControlListItem) => s.type === Type.Embedded);
+      .filter((s: ISubtitleControlListItem) => s.type === Type.Embedded);
     embeddedList = sortBy(
       embeddedList,
-      (s: SubtitleControlListItem) => (s as IEmbeddedOrigin).source.streamIndex,
+      (s: ISubtitleControlListItem) => (s.source as IEmbeddedOrigin).source.streamIndex,
     );
-    const sort = embeddedList.findIndex((s: SubtitleControlListItem) => s.id === item.id) + 1;
+    const sort = embeddedList.findIndex((s: ISubtitleControlListItem) => s.id === item.id) + 1;
     const { language } = item;
     if (language === LanguageCode.No || language === LanguageCode.Default) return `${romanize(sort)}`;
     if (language === LanguageCode['zh-CN'] || language === LanguageCode['zh-TW']) return `${romanize(sort)} - 中文`;
     return `${romanize(sort)} - ${codeToLanguageName(item.language)}`;
   } else if (item.type === Type.Online) {
     const sort = list
-      .filter((s: SubtitleControlListItem) => s.type === Type.Online
+      .filter((s: ISubtitleControlListItem) => s.type === Type.Online
         && s.language === item.language)
-      .findIndex((s: SubtitleControlListItem) => s.id === item.id) + 1;
+      .findIndex((s: ISubtitleControlListItem) => s.id === item.id) + 1;
     name = `${codeToLanguageName(item.language)} ${romanize(sort)}`;
   } else if (item.type === Type.Translated) {
     name = `${codeToLanguageName(item.language)} AI`;
diff --git a/src/renderer/main.ts b/src/renderer/main.ts
index 1d17dac35a..44171f9f26 100644
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@@ -48,7 +48,7 @@ import { CHECK_FOR_UPDATES_OFFLINE, REQUEST_TIMEOUT } from '@/helpers/notificati
 import { SNAPSHOT_FAILED, SNAPSHOT_SUCCESS, LOAD_SUBVIDEO_FAILED } from './helpers/notificationcodes';
 import InputPlugin, { getterTypes as iGT } from '@/plugins/input';
 import { VueDevtools } from './plugins/vueDevtools.dev';
-import { SubtitleControlListItem, Type, NOT_SELECTED_SUBTITLE } from './interfaces/ISubtitle';
+import { ISubtitleControlListItem, Type, NOT_SELECTED_SUBTITLE } from './interfaces/ISubtitle';
 import { getValidSubtitleRegex } from '../shared/utils';
 import { isWindowsExE, isMacintoshDMG } from '../shared/common/platform';
 import MenuService from './services/menu/MenuService';
@@ -745,7 +745,7 @@ new Vue({
           }
         });
 
-        this.list.forEach((item: SubtitleControlListItem) => {
+        this.list.forEach((item: ISubtitleControlListItem) => {
           if (item.id === this.primarySubtitleId) {
             this.menuService.updateMenuItemChecked(`subtitle.mainSubtitle.${item.id}`, true);
           }
@@ -927,20 +927,20 @@ new Vue({
           }
         });
       });
-      this.menuService.on('subtitle.mainSubtitle', (e: Event, id: string, item: SubtitleControlListItem) => {
+      this.menuService.on('subtitle.mainSubtitle', (e: Event, id: string, item: ISubtitleControlListItem) => {
         if (id === 'off') this.changeFirstSubtitle('');
-        else if (item.type === Type.Translated && item.source === '') {
+        else if (item.type === Type.Translated && item.source.source === '') {
           this.showAudioTranslateModal(item);
         } else {
           this.updateSubtitleType(true);
           this.changeFirstSubtitle(item.id);
         }
       });
-      this.menuService.on('subtitle.secondarySubtitle', (e: Event, id: string, item: SubtitleControlListItem) => {
+      this.menuService.on('subtitle.secondarySubtitle', (e: Event, id: string, item: ISubtitleControlListItem) => {
         if (id === 'off') this.changeSecondarySubtitle('');
         else if (id === 'secondarySub') {
           this.updateEnabledSecondarySub(!this.enabledSecondarySub)
-        } else if (item.type === Type.Translated && item.source === '') {
+        } else if (item.type === Type.Translated && item.source.source === '') {
           this.showAudioTranslateModal(item);
         } else {
           this.updateSubtitleType(false);
@@ -1034,13 +1034,13 @@ new Vue({
         }
       });
     },
-    getSubName(item: SubtitleControlListItem) {
+    getSubName(item: ISubtitleControlListItem) {
       if (item.type === Type.Embedded) {
         return `${this.$t('subtitle.embedded')} ${item.name}`;
       }
       return item.name;
     },
-    recentSubTmp(item: SubtitleControlListItem, isFirstSubtitleType: boolean) {
+    recentSubTmp(item: ISubtitleControlListItem, isFirstSubtitleType: boolean) {
       return {
         id: `${item.id}`,
         enabled: isFirstSubtitleType ? true : this.enabledSecondarySub,
@@ -1058,7 +1058,7 @@ new Vue({
       }
       submenu.push(offItem);
 
-      this.list.forEach((item: SubtitleControlListItem, index: number) => {
+      this.list.forEach((item: ISubtitleControlListItem, index: number) => {
         submenu.push(this.recentSubTmp(item, true));
       });
 
@@ -1080,7 +1080,7 @@ new Vue({
       }
       submenu.push(offItem);
 
-      this.list.forEach((item: SubtitleControlListItem, index: number) => {
+      this.list.forEach((item: ISubtitleControlListItem, index: number) => {
         submenu.push(this.recentSubTmp(item, false));
       });
 
diff --git a/src/renderer/store/modules/AudioTranslate.ts b/src/renderer/store/modules/AudioTranslate.ts
index 0b18dc870f..e4d2f45164 100644
--- a/src/renderer/store/modules/AudioTranslate.ts
+++ b/src/renderer/store/modules/AudioTranslate.ts
@@ -14,7 +14,7 @@ import { AudioTranslate as a, SubtitleManager as smActions } from '@/store/actio
 import { audioTranslateService } from '@/services/media/AudioTranslateService';
 import { AITaskInfo } from '@/interfaces/IMediaStorable';
 import { TranscriptInfo } from '@/services/subtitle';
-import { SubtitleControlListItem, Type } from '@/interfaces/ISubtitle';
+import { ISubtitleControlListItem, Type } from '@/interfaces/ISubtitle';
 import { mediaStorageService } from '@/services/storage/MediaStorageService';
 import { TranslatedGenerator } from '@/services/subtitle/loaders/translated';
 import { addBubble } from '../../helpers/notificationControl';
@@ -210,7 +210,7 @@ const mutations = {
   [m.AUDIO_TRANSLATE_HIDE_MODAL](state: AudioTranslateState) {
     state.isModalVisible = false;
   },
-  [m.AUDIO_TRANSLATE_SELECTED_UPDATE](state: AudioTranslateState, sub: SubtitleControlListItem) {
+  [m.AUDIO_TRANSLATE_SELECTED_UPDATE](state: AudioTranslateState, sub: ISubtitleControlListItem) {
     state.selectedTargetLanugage = sub.language;
     state.selectedTargetSubtitleId = sub.id;
   },
@@ -452,11 +452,11 @@ const actions = {
           } = getters;
           const secondaryAIButtonExist = list
             .find((
-              sub: SubtitleControlListItem,
+              sub: ISubtitleControlListItem,
             ) => sub.language === secondaryLanguage && !sub.source && sub.type === Type.Translated);
           const primaryAIButtonExist = list
             .find((
-              sub: SubtitleControlListItem,
+              sub: ISubtitleControlListItem,
             ) => sub.language === primaryLanguage && !sub.source && sub.type === Type.Translated);
           if (primaryLanguage === subtitle.language
             && !!secondaryLanguage && !!secondaryAIButtonExist) {
@@ -495,14 +495,14 @@ const actions = {
     const {
       primaryLanguage, secondaryLanguage, mediaHash,
     } = getters;
-    const list = getters.list as SubtitleControlListItem[];
+    const list = getters.list as ISubtitleControlListItem[];
     const key = `${getters.mediaHash}`;
     const taskInfo = mediaStorageService.getAsyncTaskInfo(key);
     if (taskInfo && getters.mediaHash === taskInfo.mediaHash
       && (taskInfo.targetLanguage === primaryLanguage
         || taskInfo.targetLanguage === secondaryLanguage)) {
       let sub = list.find((
-        sub: SubtitleControlListItem,
+        sub: ISubtitleControlListItem,
       ) => sub.type === Type.Translated && sub.language === taskInfo.targetLanguage);
       if (!sub) {
         try {
@@ -623,7 +623,7 @@ const actions = {
   },
   [a.AUDIO_TRANSLATE_SHOW_MODAL]({
     commit, getters, state, dispatch,
-  }: any, sub: SubtitleControlListItem) {
+  }: any, sub: ISubtitleControlListItem) {
     dispatch(a.AUDIO_TRANSLATE_HIDE_BUBBLE);
     const key = `${getters.mediaHash}`;
     const taskInfo = mediaStorageService.getAsyncTaskInfo(key);
diff --git a/src/renderer/store/modules/SubtitleManager.ts b/src/renderer/store/modules/SubtitleManager.ts
index 9e7cd87822..31e3f14da3 100644
--- a/src/renderer/store/modules/SubtitleManager.ts
+++ b/src/renderer/store/modules/SubtitleManager.ts
@@ -974,9 +974,8 @@ const actions: ActionTree<ISubtitleManagerState, {}> = {
     setDelayTimeout();
   },
   async [a.storeSubtitleDelays]({ getters, state }) {
-    const { list } = getters;
-    const { mediaHash } = state;
-    updateSubtitleList(list, mediaHash);
+    const list = getters.list.map(({ id }: ISubtitleControlListItem) => getters[`${id}/entity`]);
+    updateSubtitleList(list, state.mediaHash);
   },
 };
 

From 917f94db1be04a88a107220740d9c06b95d08eca Mon Sep 17 00:00:00 2001
From: Sin <dev@zouxin.net>
Date: Thu, 5 Sep 2019 18:17:13 +0800
Subject: [PATCH 075/123] style(deps): clear package.json

---
 .electron-vue/dev-runner.js              |  5 ++--
 .electron-vue/webpack.renderer.config.js | 11 -------
 package.json                             | 37 ++++++++++--------------
 test/e2e/index.js                        | 18 ------------
 test/e2e/specs/Launch.spec.js            | 14 ---------
 test/e2e/utils.js                        | 29 -------------------
 6 files changed, 17 insertions(+), 97 deletions(-)
 delete mode 100644 test/e2e/index.js
 delete mode 100644 test/e2e/specs/Launch.spec.js
 delete mode 100644 test/e2e/utils.js

diff --git a/.electron-vue/dev-runner.js b/.electron-vue/dev-runner.js
index 05174b9ddb..1e82e4a61e 100644
--- a/.electron-vue/dev-runner.js
+++ b/.electron-vue/dev-runner.js
@@ -173,8 +173,7 @@ function greeting() {
   const cols = process.stdout.columns;
   let text = '';
 
-  if (cols > 104) text = 'electron-vue';
-  else if (cols > 76) text = 'electron-|vue';
+  if (cols > 76) text = 'SPlayer';
   else text = false;
 
   if (text) {
@@ -183,7 +182,7 @@ function greeting() {
       font: 'simple3d',
       space: false,
     });
-  } else console.log(chalk.yellow.bold('\n  electron-vue'));
+  } else console.log(chalk.yellow.bold('\n  SPlayer'));
   console.log(chalk.blue('  getting ready...') + '\n');
 }
 
diff --git a/.electron-vue/webpack.renderer.config.js b/.electron-vue/webpack.renderer.config.js
index a07d4330b4..6f133585e6 100644
--- a/.electron-vue/webpack.renderer.config.js
+++ b/.electron-vue/webpack.renderer.config.js
@@ -110,17 +110,6 @@ let rendererConfig = {
         use: 'babel-loader',
         exclude: /node_modules/,
       },
-      {
-        // 匹配 *.worker.js
-        test: /\.worker\.js$/,
-        use: {
-          loader: 'workerize-loader',
-        },
-      },
-      {
-        test: /\.node$/,
-        use: 'node-loader',
-      },
       {
         test: /\.vue$/,
         use: {
diff --git a/package.json b/package.json
index 7661f4409c..341bd200a8 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
   "license": "GPL-3.0-or-later",
   "main": "./dist/electron/main.js",
   "engines": {
-    "node": "^11"
+    "node": ">=11.0.0"
   },
   "scripts": {
     "build": "node .electron-vue/build.js && electron-builder --p never",
@@ -19,7 +19,6 @@
     "start": "npm run stage",
     "dev": "cross-env SAGI_API=sagi-api:8443 node .electron-vue/dev-runner.js",
     "stage": "node .electron-vue/dev-runner.js",
-    "e2e": "npm run pack && electron-mocha test/e2e",
     "install-app-deps": "electron-builder install-app-deps",
     "lint": "eslint --ext .ts,.js,.vue -f ./node_modules/eslint-friendly-formatter src test",
     "lint:fix": "eslint --ext .ts,.js,.vue -f ./node_modules/eslint-friendly-formatter --fix src test",
@@ -27,7 +26,7 @@
     "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
     "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
     "rebuild:win-mouse": "electron-rebuild -f -e node_modules/@chiflix/electron -w win-mouse",
-    "test": "npm run unit && npm run e2e",
+    "test": "npm run unit",
     "unit": "karma start test/unit/karma.conf.js",
     "postinstall": "node ./scripts/post-install.js"
   },
@@ -56,7 +55,6 @@
     "fs-extra": "^7.0.1",
     "get-video-id": "^3.1.4",
     "google-protobuf": "^3.6.0",
-    "highlight.js": "~9.3.0",
     "iconv-lite": "^0.4.24",
     "idb": "^4.0.3",
     "lethargy": "^1.0.4",
@@ -68,7 +66,6 @@
     "os-locale": "^3.0.1",
     "p-queue": "^6.0.0",
     "rimraf": "^2.6.3",
-    "rollup": "^1.17.0",
     "romanize": "^1.1.1",
     "sagi-api": "^0.0.19",
     "source-map-support": "^0.5.9",
@@ -76,7 +73,7 @@
     "traditional-or-simplified": "^1.0.3",
     "url-parse-lax": "^3.0.0",
     "uuid": "^3.2.1",
-    "vue": "^2.5.18",
+    "vue": "^2.6.10",
     "vue-analytics": "^5.16.1",
     "vue-async-computed": "^3.5.1",
     "vue-axios": "^2.1.4",
@@ -117,6 +114,7 @@
     "@types/chai": "^4.1.7",
     "@types/mkdirp": "^0.5.2",
     "@types/mocha": "^5.2.7",
+    "@types/node": "^12.7.4",
     "@types/os-locale": "^2.1.0",
     "@types/rimraf": "^2.0.2",
     "@types/sinon": "^7.0.12",
@@ -135,10 +133,10 @@
     "css-loader": "^2.1.1",
     "del": "^3.0.0",
     "devtron": "^1.4.0",
-    "electron-builder": "20.38.2",
-    "electron-debug": "^1.4.0",
-    "electron-mocha": "^6.0.4",
-    "electron-rebuild": "^1.8.5",
+    "electron-builder": "^21.2.0",
+    "electron-debug": "^3.0.1",
+    "electron-mocha": "^8.1.2",
+    "electron-rebuild": "^1.8.6",
     "eslint": "^5.16.0",
     "eslint-config-airbnb-base": "^13.1.0",
     "eslint-friendly-formatter": "^4.0.1",
@@ -149,7 +147,7 @@
     "eslint-plugin-vue": "^5.2.2",
     "exports-loader": "^0.7.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "file-loader": "^2.0.0",
+    "file-loader": "^4.2.0",
     "fork-ts-checker-webpack-plugin": "^1.4.3",
     "html-webpack-plugin": "^3.2.0",
     "istanbul": "github:Xesenix/istanbul",
@@ -164,35 +162,30 @@
     "karma-webpack": "^3.0.5",
     "mocha": "^5.2.0",
     "mocha-webpack": "^1.1.0",
-    "mock-fs": "^4.8.0",
     "module-alias": "^2.0.6",
     "multispinner": "^0.2.1",
-    "node-loader": "^0.6.0",
     "node-sass": "^4.12.0",
     "raw-loader": "^2.0.0",
-    "require-dir": "^1.2.0",
     "sass-loader": "^7.1.0",
     "sass-resources-loader": "^2.0.0",
     "sinon": "^7.2.3",
     "sinon-chai": "^3.3.0",
-    "spectron": "^3.8.0",
     "style-loader": "^0.23.1",
     "svg-sprite-loader": "^4.1.3",
     "terser-webpack-plugin": "^1.4.1",
     "ts-loader": "^6.0.0",
-    "typescript": "^3.5.2",
+    "typescript": "~3.5.3",
     "url-loader": "^1.1.2",
     "vue-eslint-parser": "^6.0.4",
     "vue-html-loader": "^1.2.4",
     "vue-i18n-loader": "^1.0.0",
-    "vue-loader": "^15.4.2",
+    "vue-loader": "^15.7.1",
     "vue-style-loader": "^4.1.2",
-    "vue-template-compiler": "^2.5.18",
-    "webpack": "^4.39.2",
-    "webpack-cli": "^3.3.6",
+    "vue-template-compiler": "^2.6.10",
+    "webpack": "^4.39.3",
+    "webpack-cli": "^3.3.7",
     "webpack-dev-server": "^3.8.0",
     "webpack-hot-middleware": "^2.25.0",
-    "webpack-merge": "^4.2.1",
-    "workerize-loader": "^1.0.4"
+    "webpack-merge": "^4.2.2"
   }
 }
diff --git a/test/e2e/index.js b/test/e2e/index.js
deleted file mode 100644
index ffa99a2673..0000000000
--- a/test/e2e/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-'use strict'
-
-// Set BABEL_ENV to use proper env config
-process.env.BABEL_ENV = 'test'
-
-// Enable use of ES6+ on required files
-require('@babel/register')({
-  ignore: /node_modules/
-})
-
-// Attach Chai APIs to global scope
-const { expect, should, assert } = require('chai')
-global.expect = expect
-global.should = should
-global.assert = assert
-
-// Require all JS files in `./specs` for Mocha to consume
-require('require-dir')('./specs')
diff --git a/test/e2e/specs/Launch.spec.js b/test/e2e/specs/Launch.spec.js
deleted file mode 100644
index 997dcc6fca..0000000000
--- a/test/e2e/specs/Launch.spec.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import utils from '../utils';
-
-describe('Launch', function () {
-  beforeEach(utils.beforeEach);
-  afterEach(utils.afterEach);
-
-  it('shows the proper application title', function () {
-    return this.app.client.getTitle()
-      .then((title) => {
-        console.log(title);
-        expect(title).to.equal('SPlayerX');
-      });
-  });
-});
diff --git a/test/e2e/utils.js b/test/e2e/utils.js
deleted file mode 100644
index b67c1c07f5..0000000000
--- a/test/e2e/utils.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const Application = require('spectron').Application;
-const path = require('path');
-
-export default {
-  afterEach () {
-    this.timeout(10000)
-
-    if (this.app && this.app.isRunning()) {
-      return this.app.stop()
-    }
-  },
-  beforeEach () {
-    this.timeout(10000)
-
-    var electronPath = path.join(__dirname, "../../node_modules", ".bin", "electron");
-    if (process.platform === "win32") {
-        electronPath += ".cmd";
-    }
-
-    this.app = new Application({
-      path: electronPath,
-      args: ['dist/electron/main.js'],
-      startTimeout: 10000,
-      waitTimeout: 10000
-    })
-
-    return this.app.start()
-  }
-}

From ec500529c94af039565027305328c70a081674b9 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 11:56:30 +0800
Subject: [PATCH 076/123] feat(browsing): sidebar icon done

---
 .../LandingView/BilibiliSidebarIcon.vue       | 26 +++++++++++--------
 .../LandingView/YoutubeSidebarIcon.vue        | 24 ++++++++++-------
 .../LandingView/iQiyiSidebarIcon.vue          | 24 ++++++++++-------
 3 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/src/renderer/components/LandingView/BilibiliSidebarIcon.vue b/src/renderer/components/LandingView/BilibiliSidebarIcon.vue
index 3b28c86f23..1b1f32d98d 100644
--- a/src/renderer/components/LandingView/BilibiliSidebarIcon.vue
+++ b/src/renderer/components/LandingView/BilibiliSidebarIcon.vue
@@ -1,8 +1,12 @@
 <template>
   <div 
-    @mouseover="mouseover === true"
-    @mouseout="mouseover === false"
+    @mouseover="handleMouseover"
+    @mouseout="handleMouseout"
     @mouseup="mouseupOnIcon(url)"
+    :style="{
+      opacity: mouseover || selected ? '1.0' : '0.7',
+    }"
+    class="sidebar"
   >
     <svg
       width="42px"
@@ -37,9 +41,6 @@
           >
             <g
               id="sideBarItem--bilibili"
-              :style="{
-                opcaity: mouseover ? '1.0' : '0.7',
-              }"
             >
               <mask
                 id="mask-2"
@@ -53,7 +54,7 @@
                 :stroke-width="selected ? 2 : 0"
                 cx="20"
                 cy="20"
-                r="20.5"
+                r="20"
               />
               <g
                 id="logo--bilibili"
@@ -104,15 +105,18 @@ export default {
       mouseover: false,
     };
   },
+  methods: {
+    handleMouseover() {
+      this.mouseover = true;
+    },
+    handleMouseout() {
+      this.mouseover = false;
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
 .sidebar {
-  opacity: 0.7;
   transition: opacity 100ms ease-in;
-  &:hover {
-    cursor: pointer;
-    opacity: 1;
-  }
 }
 </style>
diff --git a/src/renderer/components/LandingView/YoutubeSidebarIcon.vue b/src/renderer/components/LandingView/YoutubeSidebarIcon.vue
index b2bfa4ee73..c869e4869c 100644
--- a/src/renderer/components/LandingView/YoutubeSidebarIcon.vue
+++ b/src/renderer/components/LandingView/YoutubeSidebarIcon.vue
@@ -1,8 +1,11 @@
 <template>
   <div 
-    @mouseover="mouseover === true"
-    @mouseout="mouseover === false"
+    @mouseover="handleMouseover"
+    @mouseout="handleMouseout"
     @mouseup="mouseupOnIcon(url)"
+    :style="{
+      opacity: mouseover || selected ? '1.0' : '0.7',
+    }"
   >
    <svg
       width="42px"
@@ -52,7 +55,7 @@
                 :stroke-width="selected ? 2 : 0"
                 cx="20"
                 cy="20"
-                r="20.5"
+                r="20"
               />
               <g
                 id="logo--youtube"
@@ -102,15 +105,18 @@ export default {
       mouseover: false,
     };
   },
+  methods: {
+    handleMouseover() {
+      this.mouseover = true;
+    },
+    handleMouseout() {
+      this.mouseover = false;
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
 .sidebar {
-  transition: opacity 50ms ease-in;
-  opacity: 0.7;
-  &:hover {
-    cursor: pointer;
-    opacity: 1;
-  }
+  transition: opacity 100ms ease-in;
 }
 </style>
diff --git a/src/renderer/components/LandingView/iQiyiSidebarIcon.vue b/src/renderer/components/LandingView/iQiyiSidebarIcon.vue
index d9391ff285..3ba56e2c21 100644
--- a/src/renderer/components/LandingView/iQiyiSidebarIcon.vue
+++ b/src/renderer/components/LandingView/iQiyiSidebarIcon.vue
@@ -1,8 +1,11 @@
 <template>
   <div 
-    @mouseover="mouseover === true"
-    @mouseout="mouseover === false"
+    @mouseover="handleMouseover"
+    @mouseout="handleMouseout"
     @mouseup="mouseupOnIcon(url)"
+    :style="{
+      opacity: mouseover || selected ? '1.0' : '0.7',
+    }"
   >
   <svg
     width="42px"
@@ -52,7 +55,7 @@
               :stroke-width="selected ? 2 : 0"
               cx="20"
               cy="20"
-              r="20.5"
+              r="20"
             />
             <g
               id="logo--iqiyi"
@@ -101,15 +104,18 @@ export default {
       mouseover: false,
     };
   },
+  methods: {
+    handleMouseover() {
+      this.mouseover = true;
+    },
+    handleMouseout() {
+      this.mouseover = false;
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
 .sidebar {
-  opacity: 0.7;
-  transition: opacity 50ms ease-in;
-  &:hover {
-    cursor: pointer;
-    opacity: 1;
-  }
+  transition: opacity 100ms ease-in;
 }
 </style>

From 45a1ae81a280461e0fd041c1f93746413c182947 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 11:59:22 +0800
Subject: [PATCH 077/123] feat(browsing): url bar can now dbclicked

---
 src/renderer/components/BrowsingView/BrowsingInput.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/renderer/components/BrowsingView/BrowsingInput.vue b/src/renderer/components/BrowsingView/BrowsingInput.vue
index 0dd935628e..6367889d01 100644
--- a/src/renderer/components/BrowsingView/BrowsingInput.vue
+++ b/src/renderer/components/BrowsingView/BrowsingInput.vue
@@ -3,6 +3,7 @@
     class="search-url"
   >
     <div
+      @dblclick="handleDbClick"
       class="url-search"
     >
       {{ title }}
@@ -53,6 +54,13 @@ export default {
     },
   },
   methods: {
+    handleDbClick() {
+      if (!this.isMaximized) {
+        this.$electron.ipcRenderer.send('callMainWindowMethod', 'maximize');
+      } else {
+        this.$electron.ipcRenderer.send('callMainWindowMethod', 'unmaximize');
+      }
+    },
     handleCloseUrlInput() {
       this.closeUrlInput();
     },

From fda61b7ecb1fb8b39b3aca5d4efdd080a28823a1 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 12:04:56 +0800
Subject: [PATCH 078/123] feat(sidebar): change implementation of selected

---
 src/renderer/components/Sidebar.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/Sidebar.vue b/src/renderer/components/Sidebar.vue
index 4db82e157c..d499425a8d 100644
--- a/src/renderer/components/Sidebar.vue
+++ b/src/renderer/components/Sidebar.vue
@@ -4,17 +4,17 @@
   >
     <div class="icon-box">
       <BilibiliSidebarIcon
-        :selected="currentUrl.startsWith('https://www.bilibili.com/')"
+        :selected="currentUrl.includes('bilibili')"
         :url="'https://www.bilibili.com/'"
         :mouseup-on-icon="handleSidebarIcon"
       />
       <iQiyiSidebarIcon
-        :selected="currentUrl.startsWith('https://www.iqiyi.com/')"
+        :selected="currentUrl.includes('iqiyi')"
         :url="'https://www.iqiyi.com/'"
         :mouseup-on-icon="handleSidebarIcon"
       />
       <YoutubeSidebarIcon
-        :selected="currentUrl.startsWith('https://www.youtube.com/')"
+        :selected="currentUrl.includes('youtube')"
         :url="'https://www.youtube.com/'"
         :mouseup-on-icon="handleSidebarIcon"
       />

From 471ae923199326e502120485d7f033002e34d844 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Fri, 6 Sep 2019 12:15:34 +0800
Subject: [PATCH 079/123] fix(browsingview): fix may pause video in some case
 and fix initial pip size

---
 src/main/helpers/BrowserViewManager.ts           |  2 +-
 src/renderer/assets/icon/back-default-icon.svg   | 16 ++++++++--------
 src/renderer/assets/icon/back-hover-icon.svg     |  9 ---------
 .../assets/icon/backDisabled-default-icon.svg    | 16 ++++++++--------
 .../assets/icon/forward-default-icon.svg         | 10 +++++-----
 .../assets/icon/forwardDisabled-default-icon.svg | 10 ++++------
 .../assets/icon/sidebar-default-icon.svg         | 12 +++---------
 .../components/BrowsingView/BrowsingControl.vue  | 16 ++++++----------
 .../components/BrowsingView/BrowsingFavicons.vue |  2 --
 .../components/BrowsingView/BrowsingInput.vue    |  3 ---
 src/renderer/components/Sidebar.vue              |  4 ++++
 src/shared/pip/iqiyi.js                          |  4 ++++
 12 files changed, 43 insertions(+), 61 deletions(-)
 delete mode 100644 src/renderer/assets/icon/back-hover-icon.svg

diff --git a/src/main/helpers/BrowserViewManager.ts b/src/main/helpers/BrowserViewManager.ts
index a30ed1ee8f..8093b8bae3 100644
--- a/src/main/helpers/BrowserViewManager.ts
+++ b/src/main/helpers/BrowserViewManager.ts
@@ -71,7 +71,7 @@ export class BrowserViewManager implements IBrowserViewManager {
       const hasLastPage = this.history[channel].list.length;
       if (hasLastPage) {
         page.view.webContents.once('media-started-playing', () => {
-          if (page.view.webContents.getURL() !== page.url) return;
+          if (lastUrl !== page.url) return;
           if (this.currentChannel.includes('bilibili')) {
             let type = '';
             page.view.webContents
diff --git a/src/renderer/assets/icon/back-default-icon.svg b/src/renderer/assets/icon/back-default-icon.svg
index e4af55c65c..2611f227d6 100644
--- a/src/renderer/assets/icon/back-default-icon.svg
+++ b/src/renderer/assets/icon/back-default-icon.svg
@@ -1,9 +1,9 @@
-<svg width="15px" height="14px" viewBox="0 0 15 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="browseing" transform="translate(-81.000000, -11.000000)" fill="#BBBACC">
-            <g id="back" transform="translate(81.000000, 11.000000)">
-                <path d="M2.5034271,7.75214251 L6.53829467,12.6741045 C6.77841425,12.9670161 6.76245981,13.3929889 6.50110221,13.6671181 L6.39621564,13.7771301 C6.12143551,14.0653377 5.66504376,14.0762228 5.37683614,13.8014427 C5.35550942,13.7811096 5.33544922,13.7594883 5.31676839,13.7367003 L0.362980511,7.69378681 C0.345414441,7.67860066 0.32841789,7.6624305 0.312064596,7.64527808 L0.207178032,7.53526609 C0.0653333835,7.38649001 -0.00422832962,7.19298876 0.000198711274,7.00030653 C-0.00422832963,6.80762431 0.0653333835,6.61412306 0.207178032,6.46534698 L0.312064596,6.35533499 C0.32841789,6.33818257 0.345414441,6.32201241 0.362980511,6.30682626 L5.31676839,0.263912758 C5.33544922,0.241124813 5.35550942,0.219503464 5.37683614,0.199170357 C5.66504376,-0.0756097699 6.12143551,-0.064724629 6.39621564,0.223482999 L6.50110221,0.333494986 C6.76245981,0.607624187 6.77841425,1.03359697 6.53829467,1.32650856 L2.52743897,6.21917951 L14.2381711,6.21917951 C14.6614871,6.21917951 15.0046526,6.56234497 15.0046526,6.98566101 C15.0046526,7.40897705 14.6614871,7.75214251 14.2381711,7.75214251 L2.5034271,7.75214251 Z" id="形状结合"></path>
-            </g>
-        </g>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="13px" viewBox="0 0 14 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 56.2 (81672) - https://sketch.com -->
+    <title>icon--backward</title>
+    <desc>Created with Sketch.</desc>
+    <g id="2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M13.7804038,7.0344359 L8.06578833,12.7774637 C7.77152389,13.0731912 7.29775814,13.0746698 7.00202238,12.7789423 C6.70922927,12.4846935 6.71070059,12.0041363 7.00202238,11.7113661 L11.4277596,7.25623151 L0.750374326,7.25623151 C0.336932792,7.25623151 0,6.92058081 0,6.49916915 C0,6.08071476 0.341346754,5.74210678 0.750374326,5.74210678 C2.06558675,5.74210678 3.05199607,5.74210678 3.70960228,5.74210678 C5.42474834,5.74210678 7.99746744,5.74210678 11.4277596,5.74210678 L6.99466576,1.28697219 C6.70187265,0.992723348 6.70040132,0.516602086 6.99760841,0.219395966 C7.29334417,-0.0748528778 7.77446653,-0.0718956012 8.064317,0.220874611 L13.7804038,5.96538103 C14.0746682,6.25962987 14.0717256,6.74166567 13.7804038,7.0344359 Z" id="icon--backward" fill="#6E7085" fill-rule="nonzero" transform="translate(7.000000, 6.500000) scale(-1, 1) translate(-7.000000, -6.500000) "></path>
     </g>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/back-hover-icon.svg b/src/renderer/assets/icon/back-hover-icon.svg
deleted file mode 100644
index e6a9da2de5..0000000000
--- a/src/renderer/assets/icon/back-hover-icon.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="15px" height="14px" viewBox="0 0 15 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="1">
-        <g id="browseing" transform="translate(-81.000000, -11.000000)" fill="#6F7078">
-            <g id="back" transform="translate(81.000000, 11.000000)">
-                <path d="M2.5034271,7.75214251 L6.53829467,12.6741045 C6.77841425,12.9670161 6.76245981,13.3929889 6.50110221,13.6671181 L6.39621564,13.7771301 C6.12143551,14.0653377 5.66504376,14.0762228 5.37683614,13.8014427 C5.35550942,13.7811096 5.33544922,13.7594883 5.31676839,13.7367003 L0.362980511,7.69378681 C0.345414441,7.67860066 0.32841789,7.6624305 0.312064596,7.64527808 L0.207178032,7.53526609 C0.0653333835,7.38649001 -0.00422832962,7.19298876 0.000198711274,7.00030653 C-0.00422832963,6.80762431 0.0653333835,6.61412306 0.207178032,6.46534698 L0.312064596,6.35533499 C0.32841789,6.33818257 0.345414441,6.32201241 0.362980511,6.30682626 L5.31676839,0.263912758 C5.33544922,0.241124813 5.35550942,0.219503464 5.37683614,0.199170357 C5.66504376,-0.0756097699 6.12143551,-0.064724629 6.39621564,0.223482999 L6.50110221,0.333494986 C6.76245981,0.607624187 6.77841425,1.03359697 6.53829467,1.32650856 L2.52743897,6.21917951 L14.2381711,6.21917951 C14.6614871,6.21917951 15.0046526,6.56234497 15.0046526,6.98566101 C15.0046526,7.40897705 14.6614871,7.75214251 14.2381711,7.75214251 L2.5034271,7.75214251 Z" id="形状结合"></path>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/src/renderer/assets/icon/backDisabled-default-icon.svg b/src/renderer/assets/icon/backDisabled-default-icon.svg
index cab0c512e0..62d7e45272 100644
--- a/src/renderer/assets/icon/backDisabled-default-icon.svg
+++ b/src/renderer/assets/icon/backDisabled-default-icon.svg
@@ -1,9 +1,9 @@
-<svg width="15px" height="14px" viewBox="0 0 15 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.3">
-        <g id="browseing" transform="translate(-81.000000, -11.000000)" fill="#BBBACC">
-            <g id="back" transform="translate(81.000000, 11.000000)">
-                <path d="M2.5034271,7.75214251 L6.53829467,12.6741045 C6.77841425,12.9670161 6.76245981,13.3929889 6.50110221,13.6671181 L6.39621564,13.7771301 C6.12143551,14.0653377 5.66504376,14.0762228 5.37683614,13.8014427 C5.35550942,13.7811096 5.33544922,13.7594883 5.31676839,13.7367003 L0.362980511,7.69378681 C0.345414441,7.67860066 0.32841789,7.6624305 0.312064596,7.64527808 L0.207178032,7.53526609 C0.0653333835,7.38649001 -0.00422832962,7.19298876 0.000198711274,7.00030653 C-0.00422832963,6.80762431 0.0653333835,6.61412306 0.207178032,6.46534698 L0.312064596,6.35533499 C0.32841789,6.33818257 0.345414441,6.32201241 0.362980511,6.30682626 L5.31676839,0.263912758 C5.33544922,0.241124813 5.35550942,0.219503464 5.37683614,0.199170357 C5.66504376,-0.0756097699 6.12143551,-0.064724629 6.39621564,0.223482999 L6.50110221,0.333494986 C6.76245981,0.607624187 6.77841425,1.03359697 6.53829467,1.32650856 L2.52743897,6.21917951 L14.2381711,6.21917951 C14.6614871,6.21917951 15.0046526,6.56234497 15.0046526,6.98566101 C15.0046526,7.40897705 14.6614871,7.75214251 14.2381711,7.75214251 L2.5034271,7.75214251 Z" id="形状结合"></path>
-            </g>
-        </g>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="13px" viewBox="0 0 14 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 56.2 (81672) - https://sketch.com -->
+    <title>icon--backward备份 2</title>
+    <desc>Created with Sketch.</desc>
+    <g id="2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M13.7804038,7.0344359 L8.06578833,12.7774637 C7.77152389,13.0731912 7.29775814,13.0746698 7.00202238,12.7789423 C6.70922927,12.4846935 6.71070059,12.0041363 7.00202238,11.7113661 L11.4277596,7.25623151 L0.750374326,7.25623151 C0.336932792,7.25623151 0,6.92058081 0,6.49916915 C0,6.08071476 0.341346754,5.74210678 0.750374326,5.74210678 C2.06558675,5.74210678 3.05199607,5.74210678 3.70960228,5.74210678 C5.42474834,5.74210678 7.99746744,5.74210678 11.4277596,5.74210678 L6.99466576,1.28697219 C6.70187265,0.992723348 6.70040132,0.516602086 6.99760841,0.219395966 C7.29334417,-0.0748528778 7.77446653,-0.0718956012 8.064317,0.220874611 L13.7804038,5.96538103 C14.0746682,6.25962987 14.0717256,6.74166567 13.7804038,7.0344359 Z" id="icon--backward备份-2" fill="#D4D5DD" fill-rule="nonzero" transform="translate(7.000000, 6.500000) scale(-1, 1) translate(-7.000000, -6.500000) "></path>
     </g>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/forward-default-icon.svg b/src/renderer/assets/icon/forward-default-icon.svg
index 74d82f3ee7..4fe2a78765 100644
--- a/src/renderer/assets/icon/forward-default-icon.svg
+++ b/src/renderer/assets/icon/forward-default-icon.svg
@@ -1,8 +1,8 @@
-<svg width="15px" height="14px" viewBox="0 0 15 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="browseing" transform="translate(-116.000000, -11.000000)" fill="#BBBACC">
-            <g id="back" transform="translate(123.500000, 18.000000) scale(-1, 1) translate(-123.500000, -18.000000) translate(116.000000, 11.000000)">
-                <path d="M2.5034271,7.75214251 L6.53829467,12.6741045 C6.77841425,12.9670161 6.76245981,13.3929889 6.50110221,13.6671181 L6.39621564,13.7771301 C6.12143551,14.0653377 5.66504376,14.0762228 5.37683614,13.8014427 C5.35550942,13.7811096 5.33544922,13.7594883 5.31676839,13.7367003 L0.362980511,7.69378681 C0.345414441,7.67860066 0.32841789,7.6624305 0.312064596,7.64527808 L0.207178032,7.53526609 C0.0653333835,7.38649001 -0.00422832962,7.19298876 0.000198711274,7.00030653 C-0.00422832963,6.80762431 0.0653333835,6.61412306 0.207178032,6.46534698 L0.312064596,6.35533499 C0.32841789,6.33818257 0.345414441,6.32201241 0.362980511,6.30682626 L5.31676839,0.263912758 C5.33544922,0.241124813 5.35550942,0.219503464 5.37683614,0.199170357 C5.66504376,-0.0756097699 6.12143551,-0.064724629 6.39621564,0.223482999 L6.50110221,0.333494986 C6.76245981,0.607624187 6.77841425,1.03359697 6.53829467,1.32650856 L2.52743897,6.21917951 L14.2381711,6.21917951 C14.6614871,6.21917951 15.0046526,6.56234497 15.0046526,6.98566101 C15.0046526,7.40897705 14.6614871,7.75214251 14.2381711,7.75214251 L2.5034271,7.75214251 Z" id="形状结合"></path>
+<svg width="14px" height="13px" viewBox="0 0 14 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="收起侧边栏" transform="translate(-206.000000, -359.000000)" fill="#6E7085" fill-rule="nonzero">
+            <g id="可点状态颜色" transform="translate(213.000000, 365.500000) scale(-1, -1) translate(-213.000000, -365.500000) translate(206.000000, 359.000000)">
+                <path d="M13.7804038,7.0344359 L8.06578832,12.7774637 C7.77152388,13.0731912 7.29775813,13.0746698 7.00202237,12.7789423 C6.70922926,12.4846935 6.71070058,12.0041363 7.00202237,11.7113661 L11.4277596,7.25623151 L0.750374315,7.25623151 C0.336932781,7.25623151 -1.12367911e-08,6.92058081 -1.12367911e-08,6.49916915 C-1.12367911e-08,6.08071476 0.341346743,5.74210678 0.750374315,5.74210678 C2.06558674,5.74210678 3.05199606,5.74210678 3.70960227,5.74210678 C5.42474833,5.74210678 7.99746743,5.74210678 11.4277596,5.74210678 L6.99466575,1.28697219 C6.70187264,0.992723348 6.70040131,0.516602086 6.9976084,0.219395966 C7.29334416,-0.0748528778 7.77446652,-0.0718956012 8.06431699,0.220874611 L13.7804038,5.96538103 C14.0746682,6.25962987 14.0717256,6.74166567 13.7804038,7.0344359 Z" id="icon--backward" transform="translate(7.000000, 6.500000) scale(-1, 1) translate(-7.000000, -6.500000) "></path>
             </g>
         </g>
     </g>
diff --git a/src/renderer/assets/icon/forwardDisabled-default-icon.svg b/src/renderer/assets/icon/forwardDisabled-default-icon.svg
index c6ce665649..3c9e92cd5a 100644
--- a/src/renderer/assets/icon/forwardDisabled-default-icon.svg
+++ b/src/renderer/assets/icon/forwardDisabled-default-icon.svg
@@ -1,9 +1,7 @@
-<svg width="15px" height="14px" viewBox="0 0 15 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.3">
-        <g id="browseing" transform="translate(-116.000000, -11.000000)" fill="#BBBACC">
-            <g id="back" transform="translate(123.500000, 18.000000) scale(-1, 1) translate(-123.500000, -18.000000) translate(116.000000, 11.000000)">
-                <path d="M2.5034271,7.75214251 L6.53829467,12.6741045 C6.77841425,12.9670161 6.76245981,13.3929889 6.50110221,13.6671181 L6.39621564,13.7771301 C6.12143551,14.0653377 5.66504376,14.0762228 5.37683614,13.8014427 C5.35550942,13.7811096 5.33544922,13.7594883 5.31676839,13.7367003 L0.362980511,7.69378681 C0.345414441,7.67860066 0.32841789,7.6624305 0.312064596,7.64527808 L0.207178032,7.53526609 C0.0653333835,7.38649001 -0.00422832962,7.19298876 0.000198711274,7.00030653 C-0.00422832963,6.80762431 0.0653333835,6.61412306 0.207178032,6.46534698 L0.312064596,6.35533499 C0.32841789,6.33818257 0.345414441,6.32201241 0.362980511,6.30682626 L5.31676839,0.263912758 C5.33544922,0.241124813 5.35550942,0.219503464 5.37683614,0.199170357 C5.66504376,-0.0756097699 6.12143551,-0.064724629 6.39621564,0.223482999 L6.50110221,0.333494986 C6.76245981,0.607624187 6.77841425,1.03359697 6.53829467,1.32650856 L2.52743897,6.21917951 L14.2381711,6.21917951 C14.6614871,6.21917951 15.0046526,6.56234497 15.0046526,6.98566101 C15.0046526,7.40897705 14.6614871,7.75214251 14.2381711,7.75214251 L2.5034271,7.75214251 Z" id="形状结合"></path>
-            </g>
+<svg width="14px" height="13px" viewBox="0 0 14 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="不可点状态颜色" transform="translate(7.000000, 6.500000) scale(-1, 1) translate(-7.000000, -6.500000) " fill="#D4D5DD" fill-rule="nonzero">
+            <path d="M13.7804038,7.0344359 L8.06578832,12.7774637 C7.77152388,13.0731912 7.29775813,13.0746698 7.00202237,12.7789423 C6.70922926,12.4846935 6.71070058,12.0041363 7.00202237,11.7113661 L11.4277596,7.25623151 L0.750374315,7.25623151 C0.336932781,7.25623151 -1.12367911e-08,6.92058081 -1.12367911e-08,6.49916915 C-1.12367911e-08,6.08071476 0.341346743,5.74210678 0.750374315,5.74210678 C2.06558674,5.74210678 3.05199606,5.74210678 3.70960227,5.74210678 C5.42474833,5.74210678 7.99746743,5.74210678 11.4277596,5.74210678 L6.99466575,1.28697219 C6.70187264,0.992723348 6.70040131,0.516602086 6.9976084,0.219395966 C7.29334416,-0.0748528778 7.77446652,-0.0718956012 8.06431699,0.220874611 L13.7804038,5.96538103 C14.0746682,6.25962987 14.0717256,6.74166567 13.7804038,7.0344359 Z" id="icon--backward备份-2" transform="translate(7.000000, 6.500000) scale(-1, 1) translate(-7.000000, -6.500000) "></path>
         </g>
     </g>
 </svg>
diff --git a/src/renderer/assets/icon/sidebar-default-icon.svg b/src/renderer/assets/icon/sidebar-default-icon.svg
index 2d7a27d2a9..df6b4868d9 100644
--- a/src/renderer/assets/icon/sidebar-default-icon.svg
+++ b/src/renderer/assets/icon/sidebar-default-icon.svg
@@ -1,14 +1,8 @@
 <svg width="14px" height="12px" viewBox="0 0 14 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="各类图标的鼠标悬浮状态" transform="translate(-92.000000, -14.000000)" fill="#B8BACC">
-            <g id="browserArea" transform="translate(76.000000, 0.000000)">
-                <g id="menuBar">
-                    <g id="button--sidebar" transform="translate(8.000000, 5.000000)">
-                        <g id="icon" transform="translate(8.000000, 9.000000)">
-                            <path d="M13.1966203,10.15 C13.6384481,10.15 13.9966203,10.5081722 13.9966203,10.95 C13.9966203,11.3918278 13.6384481,11.75 13.1966203,11.75 L0.803379678,11.75 C0.361551878,11.75 0.00337967812,11.3918278 0.00337967812,10.95 C0.00337967812,10.5081722 0.361551878,10.15 0.803379678,10.15 L13.1966203,10.15 Z M13.1966203,5.2 C13.6384481,5.2 13.9966203,5.5581722 13.9966203,6 C13.9966203,6.4418278 13.6384481,6.8 13.1966203,6.8 L0.803379678,6.8 C0.361551878,6.8 0.00337967812,6.4418278 0.00337967812,6 C0.00337967812,5.5581722 0.361551878,5.2 0.803379678,5.2 L13.1966203,5.2 Z M13.1966203,0.25 C13.6384481,0.25 13.9966203,0.6081722 13.9966203,1.05 C13.9966203,1.4918278 13.6384481,1.85 13.1966203,1.85 L0.803379678,1.85 C0.361551878,1.85 0.00337967812,1.4918278 0.00337967812,1.05 C0.00337967812,0.6081722 0.361551878,0.25 0.803379678,0.25 L13.1966203,0.25 Z"></path>
-                        </g>
-                    </g>
-                </g>
+        <g id="收起侧边栏" transform="translate(-261.000000, -290.000000)" fill="#6E7085" fill-rule="nonzero">
+            <g id="sidebar-default-icon" transform="translate(261.000000, 290.000000)">
+                <path d="M13.1966203,10.15 C13.6384481,10.15 13.9966203,10.5081722 13.9966203,10.95 C13.9966203,11.3918278 13.6384481,11.75 13.1966203,11.75 L0.803379678,11.75 C0.361551878,11.75 0.00337967812,11.3918278 0.00337967812,10.95 C0.00337967812,10.5081722 0.361551878,10.15 0.803379678,10.15 L13.1966203,10.15 Z M13.1966203,5.2 C13.6384481,5.2 13.9966203,5.5581722 13.9966203,6 C13.9966203,6.4418278 13.6384481,6.8 13.1966203,6.8 L0.803379678,6.8 C0.361551878,6.8 0.00337967812,6.4418278 0.00337967812,6 C0.00337967812,5.5581722 0.361551878,5.2 0.803379678,5.2 L13.1966203,5.2 Z M13.1966203,0.25 C13.6384481,0.25 13.9966203,0.6081722 13.9966203,1.05 C13.9966203,1.4918278 13.6384481,1.85 13.1966203,1.85 L0.803379678,1.85 C0.361551878,1.85 0.00337967812,1.4918278 0.00337967812,1.05 C0.00337967812,0.6081722 0.361551878,0.25 0.803379678,0.25 L13.1966203,0.25 Z" id="形状"></path>
             </g>
         </g>
     </g>
diff --git a/src/renderer/components/BrowsingView/BrowsingControl.vue b/src/renderer/components/BrowsingView/BrowsingControl.vue
index 8dd82edc1c..9fabc6fb97 100644
--- a/src/renderer/components/BrowsingView/BrowsingControl.vue
+++ b/src/renderer/components/BrowsingView/BrowsingControl.vue
@@ -7,7 +7,7 @@
   >
     <div
       @mouseup="handleSidebar"
-      class="control-button sidebar-icon no-drag"
+      class="control-button sidebar-icon no-drag button-hover"
     >
       <Icon
         type="sidebar"
@@ -15,26 +15,22 @@
     </div>
     <div
       @mouseup="handleUrlBack"
+      :class="backType.toString() === 'back' ? 'button-hover' : ''"
       class="control-button back-icon"
     >
       <Icon
         ref="back"
         :type="backType"
-        :style="{
-          cursor: webInfo.canGoBack ? 'pointer' : ''
-        }"
       />
     </div>
     <div
       @mouseup="handleUrlForward"
+      :class="forwardType.toString() === 'forward' ? 'button-hover' : ''"
       class="control-button forward-icon"
     >
       <Icon
         ref="forward"
         :type="forwardType"
-        :style="{
-          cursor: webInfo.canGoForward ? 'pointer' : ''
-        }"
       />
     </div>
   </div>
@@ -98,9 +94,9 @@ export default {
     justify-content: center;
     align-items: center;
     transition: background-color 100ms ease-in;
-    &:hover {
-      background-color: #F5F6F8;
-    }
+  }
+  .button-hover:hover {
+    background-color: #F5F6F8;
   }
   .sidebar-icon {
     margin-left: 8px;
diff --git a/src/renderer/components/BrowsingView/BrowsingFavicons.vue b/src/renderer/components/BrowsingView/BrowsingFavicons.vue
index a83ffc4ef9..1d55baa469 100644
--- a/src/renderer/components/BrowsingView/BrowsingFavicons.vue
+++ b/src/renderer/components/BrowsingView/BrowsingFavicons.vue
@@ -120,7 +120,6 @@ export default {
     .fav-icon-container {
       width: auto;
       height: 20px;
-      cursor: pointer;
       display: flex;
       border-radius: 13px;
       .icon-detail {
@@ -135,7 +134,6 @@ export default {
   .fav-display {
     width: 10px;
     height: 10px;
-    cursor: pointer;
   }
 }
 .fav-show-animation {
diff --git a/src/renderer/components/BrowsingView/BrowsingInput.vue b/src/renderer/components/BrowsingView/BrowsingInput.vue
index 0dd935628e..7600107549 100644
--- a/src/renderer/components/BrowsingView/BrowsingInput.vue
+++ b/src/renderer/components/BrowsingView/BrowsingInput.vue
@@ -12,9 +12,6 @@
       class="control-button page-refresh-icon no-drag"
     >
       <Icon
-        :style="{
-          cursor: 'pointer',
-        }"
         type="pageRefresh"
       />
     </div>
diff --git a/src/renderer/components/Sidebar.vue b/src/renderer/components/Sidebar.vue
index d436b10eb3..035f33633d 100644
--- a/src/renderer/components/Sidebar.vue
+++ b/src/renderer/components/Sidebar.vue
@@ -16,6 +16,7 @@
   </div>
 </template>
 <script lang="ts">
+import { mapGetters } from 'vuex';
 import BilibiliSidebarIcon from '@/components/LandingView/BilibiliSidebarIcon.vue';
 import iQiyiSidebarIcon from '@/components/LandingView/iQiyiSidebarIcon.vue';
 import YoutubeSidebarIcon from '@/components/LandingView/YoutubeSidebarIcon.vue';
@@ -34,6 +35,9 @@ export default {
       default: false,
     },
   },
+  computed: {
+    ...mapGetters(['pipSize', 'pipPos']),
+  },
   methods: {
     handleSidebarIcon(site: string) {
       const url = `https://www.${site}.com/`;
diff --git a/src/shared/pip/iqiyi.js b/src/shared/pip/iqiyi.js
index 41392ac546..2be061729a 100644
--- a/src/shared/pip/iqiyi.js
+++ b/src/shared/pip/iqiyi.js
@@ -8,6 +8,8 @@ const iqiyi = (barrageState, winSize) => ({
     if (header) header.style.display = "none";
     ${iqiyiBarrageAdapt(barrageState)}
     var iqpPlayer = document.querySelector(".iqp-player");
+    var screenShots = document.querySelector(".iqp-screenshot");
+    if (screenShots) screenShots.style.display = "none";
     document.scrollingElement.scrollTop = 0;
     iqpPlayer.addEventListener('mouseleave', () => { document.querySelector(".iqp-bottom").parentElement.classList.add('iqp-bottom-hide'); });
     iqpPlayer.style.position = "fixed";
@@ -28,6 +30,8 @@ const iqiyi = (barrageState, winSize) => ({
     + 'iqpPlayer.style.zIndex="0";'
     + 'var header = document.querySelector(".qy-header");'
     + 'if (header) header.style.display = "";'
+    + 'var screenShots = document.querySelector(".iqp-screenshot");'
+    + 'if (screenShots) screenShots.style.display = "";'
     + 'document.getElementsByClassName("iqp-barrage")[document.getElementsByClassName("iqp-barrage").length - 1].style.opacity = "1";'
     + 'document.body.style.overflow = "";'
     + 'iqpPlayer.style.width="100%";'

From 355880a6bd76f787b62257f17395450df9cc02d2 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 12:18:23 +0800
Subject: [PATCH 080/123] feat(browsing): url bar dbclick

---
 src/renderer/components/BrowsingView/BrowsingInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/BrowsingView/BrowsingInput.vue b/src/renderer/components/BrowsingView/BrowsingInput.vue
index 6367889d01..1563ff08c4 100644
--- a/src/renderer/components/BrowsingView/BrowsingInput.vue
+++ b/src/renderer/components/BrowsingView/BrowsingInput.vue
@@ -55,7 +55,7 @@ export default {
   },
   methods: {
     handleDbClick() {
-      if (!this.isMaximized) {
+      if (!this.$electron.remote.getCurrentWindow().isMaximized()) {
         this.$electron.ipcRenderer.send('callMainWindowMethod', 'maximize');
       } else {
         this.$electron.ipcRenderer.send('callMainWindowMethod', 'unmaximize');

From 2fa1d7a12a234bfb809b7130a8f47e4863781067 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 12:26:06 +0800
Subject: [PATCH 081/123] feat(sidebar): cursor pointer

---
 src/renderer/components/Sidebar.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/components/Sidebar.vue b/src/renderer/components/Sidebar.vue
index 6a2256a970..616ba13571 100644
--- a/src/renderer/components/Sidebar.vue
+++ b/src/renderer/components/Sidebar.vue
@@ -87,6 +87,7 @@ export default {
       width: 40px;
       height: 40px;
       margin-bottom: 16px;
+      cursor: pointer;
     }
   }
 }

From 86b95400a631dec581e8cf571bd389deda77976f Mon Sep 17 00:00:00 2001
From: Sin <dev@zouxin.net>
Date: Fri, 6 Sep 2019 12:27:33 +0800
Subject: [PATCH 082/123] build(electron): fix electron builder

---
 package.json                     |   2 +-
 scripts/patch/appx/AppxTarget.js |  36 ++-
 scripts/patch/mac/electronMac.js | 383 +++++++++++++++++--------------
 3 files changed, 227 insertions(+), 194 deletions(-)

diff --git a/package.json b/package.json
index 341bd200a8..b93b3bf8e6 100644
--- a/package.json
+++ b/package.json
@@ -133,7 +133,7 @@
     "css-loader": "^2.1.1",
     "del": "^3.0.0",
     "devtron": "^1.4.0",
-    "electron-builder": "^21.2.0",
+    "electron-builder": "21.2.0",
     "electron-debug": "^3.0.1",
     "electron-mocha": "^8.1.2",
     "electron-rebuild": "^1.8.6",
diff --git a/scripts/patch/appx/AppxTarget.js b/scripts/patch/appx/AppxTarget.js
index cd387480a3..0a05e2912f 100644
--- a/scripts/patch/appx/AppxTarget.js
+++ b/scripts/patch/appx/AppxTarget.js
@@ -35,10 +35,10 @@ function _fs() {
   return data;
 }
 
-function _fsExtraP() {
-  const data = require("fs-extra-p");
+function _fsExtra() {
+  const data = require("fs-extra");
 
-  _fsExtraP = function () {
+  _fsExtra = function () {
     return data;
   };
 
@@ -67,16 +67,6 @@ function _core() {
   return data;
 }
 
-function _platformPackager() {
-  const data = require("../platformPackager");
-
-  _platformPackager = function () {
-    return data;
-  };
-
-  return data;
-}
-
 function _pathManager() {
   const data = require("../util/pathManager");
 
@@ -166,11 +156,11 @@ class AppXTarget extends _core().Target {
       const outFile = vm.toVmFile(stageDir.getTempFile("resources.pri"));
       const makePriPath = vm.toVmFile(path.join(vendorPath, "windows-10", _builderUtil().Arch[arch], "makepri.exe"));
       const assetRoot = stageDir.getTempFile("appx/assets");
-      await (0, _fsExtraP().emptyDir)(assetRoot);
+      await (0, _fsExtra().emptyDir)(assetRoot);
       await _bluebirdLst().default.map(assetInfo.allAssets, it => (0, _fs().copyOrLinkFile)(it, path.join(assetRoot, path.basename(it))));
       await vm.exec(makePriPath, ["new", "/Overwrite", "/Manifest", vm.toVmFile(manifestFile), "/ProjectRoot", vm.toVmFile(path.dirname(assetRoot)), "/ConfigXml", vm.toVmFile(path.join((0, _pathManager().getTemplatePath)("appx"), "priconfig.xml")), "/OutputFile", outFile]); // in addition to resources.pri, resources.scale-140.pri and other such files will be generated
 
-      for (const resourceFile of (await (0, _fsExtraP().readdir)(stageDir.dir)).filter(it => it.startsWith("resources.")).sort()) {
+      for (const resourceFile of (await (0, _fsExtra().readdir)(stageDir.dir)).filter(it => it.startsWith("resources.")).sort()) {
         mappingList.push([`"${vm.toVmFile(stageDir.getTempFile(resourceFile))}" "${resourceFile}"`]);
       }
 
@@ -183,7 +173,7 @@ class AppXTarget extends _core().Target {
       mapping += "\r\n" + list.join("\r\n");
     }
 
-    await (0, _fsExtraP().writeFile)(mappingFile, mapping);
+    await (0, _fsExtra().writeFile)(mappingFile, mapping);
     packager.debugLogger.add("appx.mapping", mapping);
 
     if (this.options.makeappxArgs != null) {
@@ -211,7 +201,7 @@ class AppXTarget extends _core().Target {
     if (userAssetDir == null) {
       userAssets = [];
     } else {
-      userAssets = (await (0, _fsExtraP().readdir)(userAssetDir)).filter(it => !it.startsWith(".") && !it.endsWith(".db") && it.includes("."));
+      userAssets = (await (0, _fsExtra().readdir)(userAssetDir)).filter(it => !it.startsWith(".") && !it.endsWith(".db") && it.includes("."));
 
       for (const name of userAssets) {
         mappings.push(`"${vm.toVmFile(userAssetDir)}${vm.pathSep}${name}" "assets\\${name}"`);
@@ -260,7 +250,7 @@ class AppXTarget extends _core().Target {
     const options = this.options;
     const executable = `app\\${appInfo.productFilename}.exe`;
     const displayName = options.displayName || appInfo.productName;
-    const manifest = (await (0, _fsExtraP().readFile)(path.join((0, _pathManager().getTemplatePath)("appx"), "appxmanifest.xml"), "utf8")).replace(/\${([a-zA-Z0-9]+)}/g, (match, p1) => {
+    const manifest = (await (0, _fsExtra().readFile)(path.join((0, _pathManager().getTemplatePath)("appx"), "appxmanifest.xml"), "utf8")).replace(/\${([a-zA-Z0-9]+)}/g, (match, p1) => {
       switch (p1) {
         case "publisher":
           return publisher;
@@ -275,7 +265,7 @@ class AppXTarget extends _core().Target {
           return name;
 
         case "version":
-          return appInfo.getVersionInWeirdWindowsForm(false);
+          return appInfo.getVersionInWeirdWindowsForm(options.setBuildNumber === true);
 
         case "applicationId":
           const result = options.applicationId || options.identityName || appInfo.name;
@@ -338,7 +328,7 @@ class AppXTarget extends _core().Target {
           throw new Error(`Macro ${p1} is not defined`);
       }
     });
-    await (0, _fsExtraP().writeFile)(outFile, manifest);
+    await (0, _fsExtra().writeFile)(outFile, manifest);
   }
 
   getExtensions(executable, displayName) {
@@ -351,7 +341,7 @@ class AppXTarget extends _core().Target {
       isAddAutoLaunchExtension = deps != null && deps["electron-winstore-auto-launch"] != null;
     }
 
-    if (!isAddAutoLaunchExtension && uriSchemes.length === 0 && fileAssociations.length === 0) {
+    if (!isAddAutoLaunchExtension && uriSchemes.length === 0) {
       return "";
     }
 
@@ -375,6 +365,7 @@ class AppXTarget extends _core().Target {
       }
     }
 
+
     if (fileAssociations.length) {
       const appName = this.options.applicationId || this.options.identityName || this.packager.appInfo.name;
       const sectionName = appName.toLowerCase().replace(/[^-_.a-z0-9]/g, '_');
@@ -400,7 +391,6 @@ class AppXTarget extends _core().Target {
     }
 
     extensions += "</Extensions>";
-
     return extensions;
   }
 
@@ -465,6 +455,6 @@ function isDefaultAssetIncluded(userAssets, defaultAsset) {
 
 function isScaledAssetsProvided(userAssets) {
   return userAssets.some(it => it.includes(".scale-") || it.includes(".targetsize-"));
-} 
+}
 // __ts-babel@6.0.4
 //# sourceMappingURL=AppxTarget.js.map
\ No newline at end of file
diff --git a/scripts/patch/mac/electronMac.js b/scripts/patch/mac/electronMac.js
index 911333e5ea..6d63d818e2 100644
--- a/scripts/patch/mac/electronMac.js
+++ b/scripts/patch/mac/electronMac.js
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.createMacApp = createMacApp;
 
 function _bluebirdLst() {
-  const data = _interopRequireWildcard(require("bluebird-lst"));
+  const data = _interopRequireDefault(require("bluebird-lst"));
 
   _bluebirdLst = function () {
     return data;
@@ -35,20 +35,10 @@ function _fs() {
   return data;
 }
 
-function _promise() {
-  const data = require("builder-util/out/promise");
+function _fsExtra() {
+  const data = require("fs-extra");
 
-  _promise = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _fsExtraP() {
-  const data = require("fs-extra-p");
-
-  _fsExtraP = function () {
+  _fsExtra = function () {
     return data;
   };
 
@@ -57,30 +47,30 @@ function _fsExtraP() {
 
 var path = _interopRequireWildcard(require("path"));
 
-function _plist() {
-  const data = require("plist");
+function _appInfo() {
+  const data = require("../appInfo");
 
-  _plist = function () {
+  _appInfo = function () {
     return data;
   };
 
   return data;
 }
 
-function _appInfo() {
-  const data = require("../appInfo");
+function _platformPackager() {
+  const data = require("../platformPackager");
 
-  _appInfo = function () {
+  _platformPackager = function () {
     return data;
   };
 
   return data;
 }
 
-function _platformPackager() {
-  const data = require("../platformPackager");
+function _appBuilder() {
+  const data = require("../util/appBuilder");
 
-  _platformPackager = function () {
+  _appBuilder = function () {
     return data;
   };
 
@@ -89,8 +79,10 @@ function _platformPackager() {
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function doRename(basePath, oldName, newName) {
-  return (0, _fsExtraP().rename)(path.join(basePath, oldName), path.join(basePath, newName));
+  return (0, _fsExtra().rename)(path.join(basePath, oldName), path.join(basePath, newName));
 }
 
 function moveHelpers(helperSuffixes, frameworksPath, appName, prefix) {
@@ -100,7 +92,7 @@ function moveHelpers(helperSuffixes, frameworksPath, appName, prefix) {
   });
 }
 
-function getAvailableHelperSuffixes(helperEHPlist, helperNPPlist) {
+function getAvailableHelperSuffixes(helperEHPlist, helperNPPlist, helperRendererPlist, helperPluginPlist, helperGPUPlist) {
   const result = [" Helper"];
 
   if (helperEHPlist != null) {
@@ -111,156 +103,205 @@ function getAvailableHelperSuffixes(helperEHPlist, helperNPPlist) {
     result.push(" Helper NP");
   }
 
+  if (helperRendererPlist != null) {
+    result.push(" Helper (Renderer)");
+  }
+
+  if (helperPluginPlist != null) {
+    result.push(" Helper (Plugin)");
+  }
+
+  if (helperGPUPlist != null) {
+    result.push(" Helper (GPU)");
+  }
+
   return result;
 }
 /** @internal */
 
 
-function createMacApp(_x, _x2, _x3, _x4) {
-  return _createMacApp.apply(this, arguments);
-}
+async function createMacApp(packager, appOutDir, asarIntegrity, isMas) {
+  const appInfo = packager.appInfo;
+  const appFilename = appInfo.productFilename;
+  const contentsPath = path.join(appOutDir, packager.info.framework.distMacOsAppName, "Contents");
+  const frameworksPath = path.join(contentsPath, "Frameworks");
+  const loginItemPath = path.join(contentsPath, "Library", "LoginItems");
+  const appPlistFilename = path.join(contentsPath, "Info.plist");
+  const helperPlistFilename = path.join(frameworksPath, "Electron Helper.app", "Contents", "Info.plist");
+  const helperEHPlistFilename = path.join(frameworksPath, "Electron Helper EH.app", "Contents", "Info.plist");
+  const helperNPPlistFilename = path.join(frameworksPath, "Electron Helper NP.app", "Contents", "Info.plist");
+  const helperRendererPlistFilename = path.join(frameworksPath, "Electron Helper (Renderer).app", "Contents", "Info.plist");
+  const helperPluginPlistFilename = path.join(frameworksPath, "Electron Helper (Plugin).app", "Contents", "Info.plist");
+  const helperGPUPlistFilename = path.join(frameworksPath, "Electron Helper (GPU).app", "Contents", "Info.plist");
+  const helperLoginPlistFilename = path.join(loginItemPath, "Electron Login Helper.app", "Contents", "Info.plist");
+  const plistContent = await (0, _appBuilder().executeAppBuilderAsJson)(["decode-plist", "-f", appPlistFilename, "-f", helperPlistFilename, "-f", helperEHPlistFilename, "-f", helperNPPlistFilename, "-f", helperRendererPlistFilename, "-f", helperPluginPlistFilename, "-f", helperGPUPlistFilename, "-f", helperLoginPlistFilename]);
+
+  if (plistContent[0] == null) {
+    throw new Error("corrupted Electron dist");
+  }
 
-function _createMacApp() {
-  _createMacApp = (0, _bluebirdLst().coroutine)(function* (packager, appOutDir, asarIntegrity, isMas) {
-    const appInfo = packager.appInfo;
-    const appFilename = appInfo.productFilename;
-    const contentsPath = path.join(appOutDir, packager.info.framework.distMacOsAppName, "Contents");
-    const frameworksPath = path.join(contentsPath, "Frameworks");
-    const loginItemPath = path.join(contentsPath, "Library", "LoginItems");
-    const appPlistFilename = path.join(contentsPath, "Info.plist");
-    const helperPlistFilename = path.join(frameworksPath, `${packager.electronDistMacOsExecutableName} Helper.app`, "Contents", "Info.plist");
-    const helperEHPlistFilename = path.join(frameworksPath, `${packager.electronDistMacOsExecutableName} Helper EH.app`, "Contents", "Info.plist");
-    const helperNPPlistFilename = path.join(frameworksPath, `${packager.electronDistMacOsExecutableName} Helper NP.app`, "Contents", "Info.plist");
-    const helperLoginPlistFilename = path.join(loginItemPath, `${packager.electronDistMacOsExecutableName} Login Helper.app`, "Contents", "Info.plist");
-    const buildMetadata = packager.config;
-    const fileContents = yield _bluebirdLst().default.map([appPlistFilename, helperPlistFilename, helperEHPlistFilename, helperNPPlistFilename, helperLoginPlistFilename, buildMetadata["extend-info"]], it => it == null ? it : (0, _promise().orIfFileNotExist)((0, _fsExtraP().readFile)(it, "utf8"), null));
-    const appPlist = (0, _plist().parse)(fileContents[0]);
-    const helperPlist = (0, _plist().parse)(fileContents[1]);
-    const helperEHPlist = fileContents[2] == null ? null : (0, _plist().parse)(fileContents[2]);
-    const helperNPPlist = fileContents[3] == null ? null : (0, _plist().parse)(fileContents[3]);
-    const helperLoginPlist = fileContents[4] == null ? null : (0, _plist().parse)(fileContents[4]); // if an extend-info file was supplied, copy its contents in first
-
-    if (fileContents[5] != null) {
-      Object.assign(appPlist, (0, _plist().parse)(fileContents[5]));
-    }
-
-    const oldHelperBundleId = buildMetadata["helper-bundle-id"];
-
-    if (oldHelperBundleId != null) {
-      _builderUtil().log.warn("build.helper-bundle-id is deprecated, please set as build.mac.helperBundleId");
-    }
-
-    const helperBundleIdentifier = (0, _appInfo().filterCFBundleIdentifier)(packager.platformSpecificBuildOptions.helperBundleId || oldHelperBundleId || `${appInfo.macBundleIdentifier}.helper`);
-    yield packager.applyCommonInfo(appPlist, contentsPath); // required for electron-updater proxy
-
-    if (!isMas) {
-      configureLocalhostAts(appPlist);
-    }
-
-    helperPlist.CFBundleExecutable = `${appFilename} Helper`;
-    helperPlist.CFBundleDisplayName = `${appInfo.productName} Helper`;
-    helperPlist.CFBundleIdentifier = helperBundleIdentifier;
-    helperPlist.CFBundleVersion = appPlist.CFBundleVersion;
-
-    function configureHelper(helper, postfix) {
-      helper.CFBundleExecutable = `${appFilename} Helper ${postfix}`;
-      helper.CFBundleDisplayName = `${appInfo.productName} Helper ${postfix}`;
-      helper.CFBundleIdentifier = `${helperBundleIdentifier}.${postfix}`;
-      helper.CFBundleVersion = appPlist.CFBundleVersion;
-    }
-
-    if (helperEHPlist != null) {
-      configureHelper(helperEHPlist, "EH");
-    }
-
-    if (helperNPPlist != null) {
-      configureHelper(helperNPPlist, "NP");
-    }
-
-    if (helperLoginPlist != null) {
-      helperLoginPlist.CFBundleExecutable = `${appFilename} Login Helper`;
-      helperLoginPlist.CFBundleDisplayName = `${appInfo.productName} Login Helper`; // noinspection SpellCheckingInspection
-
-      helperLoginPlist.CFBundleIdentifier = `${appInfo.macBundleIdentifier}.loginhelper`;
-      helperLoginPlist.CFBundleVersion = appPlist.CFBundleVersion;
-    }
-
-    const protocols = (0, _builderUtil().asArray)(buildMetadata.protocols).concat((0, _builderUtil().asArray)(packager.platformSpecificBuildOptions.protocols));
-
-    if (protocols.length > 0) {
-      appPlist.CFBundleURLTypes = protocols.map(protocol => {
-        const schemes = (0, _builderUtil().asArray)(protocol.schemes);
-
-        if (schemes.length === 0) {
-          throw new (_builderUtil().InvalidConfigurationError)(`Protocol "${protocol.name}": must be at least one scheme specified`);
-        }
-
-        return {
-          CFBundleURLName: protocol.name,
-          CFBundleTypeRole: protocol.role || "Editor",
-          CFBundleURLSchemes: schemes.slice()
-        };
-      });
-    }
-
-    const fileAssociations = packager.fileAssociations;
-
-    if (fileAssociations.length > 0) {
-      appPlist.CFBundleDocumentTypes = yield _bluebirdLst().default.map(fileAssociations,
-      /*#__PURE__*/
-      function () {
-        var _ref = (0, _bluebirdLst().coroutine)(function* (fileAssociation) {
-          const extensions = (0, _builderUtil().asArray)(fileAssociation.ext).map(_platformPackager().normalizeExt);
-          const customIcon = yield packager.getResource((0, _builderUtil().getPlatformIconFileName)(fileAssociation.icon, true), `${extensions[0]}.icns`);
-          let iconFile = appPlist.CFBundleIconFile;
-
-          if (customIcon != null) {
-            iconFile = path.basename(customIcon);
-            yield (0, _fs().copyOrLinkFile)(customIcon, path.join(path.join(contentsPath, "Resources"), iconFile));
-          }
-
-          const result = {
-            CFBundleTypeExtensions: extensions,
-            CFBundleTypeName: fileAssociation.name || extensions[0],
-            CFBundleTypeRole: fileAssociation.role || "Editor",
-            LSHandlerRank: fileAssociation.rank || "Default",
-            CFBundleTypeIconFile: iconFile
-          };
-
-          if (fileAssociation.isPackage) {
-            result.LSTypeIsPackage = true;
-          }
-
-          return result;
-        });
-
-        return function (_x5) {
-          return _ref.apply(this, arguments);
-        };
-      }());
-    }
-
-    if (asarIntegrity != null) {
-      appPlist.AsarIntegrity = JSON.stringify(asarIntegrity);
-    }
-
-    yield Promise.all([(0, _fsExtraP().writeFile)(appPlistFilename, (0, _plist().build)(appPlist)), (0, _fsExtraP().writeFile)(helperPlistFilename, (0, _plist().build)(helperPlist)), helperEHPlist == null ? Promise.resolve() : (0, _fsExtraP().writeFile)(helperEHPlistFilename, (0, _plist().build)(helperEHPlist)), helperNPPlist == null ? Promise.resolve() : (0, _fsExtraP().writeFile)(helperNPPlistFilename, (0, _plist().build)(helperNPPlist)), helperLoginPlist == null ? Promise.resolve() : (0, _fsExtraP().writeFile)(helperLoginPlistFilename, (0, _plist().build)(helperLoginPlist)), doRename(path.join(contentsPath, "MacOS"), packager.electronDistMacOsExecutableName, appPlist.CFBundleExecutable), (0, _fs().unlinkIfExists)(path.join(appOutDir, "LICENSE")), (0, _fs().unlinkIfExists)(path.join(appOutDir, "LICENSES.chromium.html"))]);
-    yield moveHelpers(getAvailableHelperSuffixes(helperEHPlist, helperNPPlist), frameworksPath, appFilename, packager.electronDistMacOsExecutableName);
-
-    if (helperLoginPlist != null) {
-      const prefix = packager.electronDistMacOsExecutableName;
-      const suffix = " Login Helper";
-      const executableBasePath = path.join(loginItemPath, `${prefix}${suffix}.app`, "Contents", "MacOS");
-      yield doRename(executableBasePath, `${prefix}${suffix}`, appFilename + suffix).then(() => doRename(loginItemPath, `${prefix}${suffix}.app`, `${appFilename}${suffix}.app`));
-    }
-
-    const appPath = path.join(appOutDir, `${appFilename}.app`);
-    yield (0, _fsExtraP().rename)(path.dirname(contentsPath), appPath); // https://github.com/electron-userland/electron-builder/issues/840
-
-    const now = Date.now() / 1000;
-    yield (0, _fsExtraP().utimes)(appPath, now, now);
-  });
-  return _createMacApp.apply(this, arguments);
+  const appPlist = plistContent[0];
+  const helperPlist = plistContent[1];
+  const helperEHPlist = plistContent[2];
+  const helperNPPlist = plistContent[3];
+  const helperRendererPlist = plistContent[4];
+  const helperPluginPlist = plistContent[5];
+  const helperGPUPlist = plistContent[6];
+  const helperLoginPlist = plistContent[7]; // if an extend-info file was supplied, copy its contents in first
+
+  if (plistContent[8] != null) {
+    Object.assign(appPlist, plistContent[8]);
+  }
+
+  const buildMetadata = packager.config;
+  const oldHelperBundleId = buildMetadata["helper-bundle-id"];
+
+  if (oldHelperBundleId != null) {
+    _builderUtil().log.warn("build.helper-bundle-id is deprecated, please set as build.mac.helperBundleId");
+  }
+
+  const helperBundleIdentifier = (0, _appInfo().filterCFBundleIdentifier)(packager.platformSpecificBuildOptions.helperBundleId || oldHelperBundleId || `${appInfo.macBundleIdentifier}.helper`);
+  await packager.applyCommonInfo(appPlist, contentsPath); // required for electron-updater proxy
+
+  if (!isMas) {
+    configureLocalhostAts(appPlist);
+  }
+
+  helperPlist.CFBundleExecutable = `${appFilename} Helper`;
+  helperPlist.CFBundleDisplayName = `${appInfo.productName} Helper`;
+  helperPlist.CFBundleIdentifier = helperBundleIdentifier;
+  helperPlist.CFBundleVersion = appPlist.CFBundleVersion;
+
+  function configureHelper(helper, postfix) {
+    helper.CFBundleExecutable = `${appFilename} Helper ${postfix}`;
+    helper.CFBundleDisplayName = `${appInfo.productName} Helper ${postfix}`;
+    helper.CFBundleIdentifier = `${helperBundleIdentifier}.${postfix}`;
+    helper.CFBundleVersion = appPlist.CFBundleVersion;
+  }
+
+  if (helperRendererPlist != null) {
+    configureHelper(helperRendererPlist, "(Renderer)");
+  }
+
+  if (helperPluginPlist != null) {
+    configureHelper(helperPluginPlist, "(Plugin)");
+  }
+
+  if (helperGPUPlist != null) {
+    configureHelper(helperGPUPlist, "(GPU)");
+  }
+
+  if (helperEHPlist != null) {
+    configureHelper(helperEHPlist, "EH");
+  }
+
+  if (helperNPPlist != null) {
+    configureHelper(helperNPPlist, "NP");
+  }
+
+  if (helperLoginPlist != null) {
+    helperLoginPlist.CFBundleExecutable = `${appFilename} Login Helper`;
+    helperLoginPlist.CFBundleDisplayName = `${appInfo.productName} Login Helper`; // noinspection SpellCheckingInspection
+
+    helperLoginPlist.CFBundleIdentifier = `${appInfo.macBundleIdentifier}.loginhelper`;
+    helperLoginPlist.CFBundleVersion = appPlist.CFBundleVersion;
+  }
+
+  const protocols = (0, _builderUtil().asArray)(buildMetadata.protocols).concat((0, _builderUtil().asArray)(packager.platformSpecificBuildOptions.protocols));
+
+  if (protocols.length > 0) {
+    appPlist.CFBundleURLTypes = protocols.map(protocol => {
+      const schemes = (0, _builderUtil().asArray)(protocol.schemes);
+
+      if (schemes.length === 0) {
+        throw new (_builderUtil().InvalidConfigurationError)(`Protocol "${protocol.name}": must be at least one scheme specified`);
+      }
+
+      return {
+        CFBundleURLName: protocol.name,
+        CFBundleTypeRole: protocol.role || "Editor",
+        CFBundleURLSchemes: schemes.slice()
+      };
+    });
+  }
+
+  const fileAssociations = packager.fileAssociations;
+
+  if (fileAssociations.length > 0) {
+    appPlist.CFBundleDocumentTypes = await _bluebirdLst().default.map(fileAssociations, async fileAssociation => {
+      const extensions = (0, _builderUtil().asArray)(fileAssociation.ext).map(_platformPackager().normalizeExt);
+      const customIcon = await packager.getResource((0, _builderUtil().getPlatformIconFileName)(fileAssociation.icon, true), `${extensions[0]}.icns`);
+      let iconFile = appPlist.CFBundleIconFile;
+
+      if (customIcon != null) {
+        iconFile = path.basename(customIcon);
+        await (0, _fs().copyOrLinkFile)(customIcon, path.join(path.join(contentsPath, "Resources"), iconFile));
+      }
+
+      const result = {
+        CFBundleTypeExtensions: extensions,
+        CFBundleTypeName: fileAssociation.name || extensions[0],
+        CFBundleTypeRole: fileAssociation.role || "Editor",
+        LSHandlerRank: fileAssociation.rank || "Default",
+        CFBundleTypeIconFile: iconFile
+      };
+
+      if (fileAssociation.isPackage) {
+        result.LSTypeIsPackage = true;
+      }
+
+      return result;
+    });
+  }
+
+  if (asarIntegrity != null) {
+    appPlist.AsarIntegrity = JSON.stringify(asarIntegrity);
+  }
+
+  const plistDataToWrite = {
+    [appPlistFilename]: appPlist,
+    [helperPlistFilename]: helperPlist
+  };
+
+  if (helperEHPlist != null) {
+    plistDataToWrite[helperEHPlistFilename] = helperEHPlist;
+  }
+
+  if (helperNPPlist != null) {
+    plistDataToWrite[helperNPPlistFilename] = helperNPPlist;
+  }
+
+  if (helperRendererPlist != null) {
+    plistDataToWrite[helperRendererPlistFilename] = helperRendererPlist;
+  }
+
+  if (helperPluginPlist != null) {
+    plistDataToWrite[helperPluginPlistFilename] = helperPluginPlist;
+  }
+
+  if (helperGPUPlist != null) {
+    plistDataToWrite[helperGPUPlistFilename] = helperGPUPlist;
+  }
+
+  if (helperLoginPlist != null) {
+    plistDataToWrite[helperLoginPlistFilename] = helperLoginPlist;
+  }
+
+  await Promise.all([(0, _appBuilder().executeAppBuilderAndWriteJson)(["encode-plist"], plistDataToWrite), doRename(path.join(contentsPath, "MacOS"), "Electron", appPlist.CFBundleExecutable), (0, _fs().unlinkIfExists)(path.join(appOutDir, "LICENSE")), (0, _fs().unlinkIfExists)(path.join(appOutDir, "LICENSES.chromium.html"))]);
+  await moveHelpers(getAvailableHelperSuffixes(helperEHPlist, helperNPPlist, helperRendererPlist, helperPluginPlist, helperGPUPlist), frameworksPath, appFilename, "Electron");
+
+  if (helperLoginPlist != null) {
+    const prefix = "Electron";
+    const suffix = " Login Helper";
+    const executableBasePath = path.join(loginItemPath, `${prefix}${suffix}.app`, "Contents", "MacOS");
+    await doRename(executableBasePath, `${prefix}${suffix}`, appFilename + suffix).then(() => doRename(loginItemPath, `${prefix}${suffix}.app`, `${appFilename}${suffix}.app`));
+  }
+
+  const appPath = path.join(appOutDir, `${appFilename}.app`);
+  await (0, _fsExtra().rename)(path.dirname(contentsPath), appPath); // https://github.com/electron-userland/electron-builder/issues/840
+
+  const now = Date.now() / 1000;
+  await (0, _fsExtra().utimes)(appPath, now, now);
 }
 
 function configureLocalhostAts(appPlist) {
@@ -272,7 +313,9 @@ function configureLocalhostAts(appPlist) {
     appPlist.NSAppTransportSecurity = ats;
   }
 
-  ats.NSAllowsLocalNetworking = true;
+  ats.NSAllowsLocalNetworking = true; // https://github.com/electron-userland/electron-builder/issues/3377#issuecomment-446035814
+
+  ats.NSAllowsArbitraryLoads = true;
   let exceptionDomains = ats.NSExceptionDomains;
 
   if (exceptionDomains == null) {

From 8995ecc97df5cb2689e6f4a281dc897260275f70 Mon Sep 17 00:00:00 2001
From: Yan Yifeng <yanyifeng@splayer.org>
Date: Fri, 6 Sep 2019 13:14:39 +0800
Subject: [PATCH 083/123] fix(style): fix code style and add comments

---
 src/main/helpers/mediaTasksPlugin.ts          | 23 +++++++---
 src/renderer/constants.js                     |  8 ++--
 src/renderer/interfaces/ISubtitle.ts          | 45 ++++++++++++++-----
 src/renderer/libs/TimeSegments.ts             | 35 ++++++++++-----
 .../services/storage/subtitle/index.ts        |  4 +-
 .../services/subtitle/utils/loaders.ts        | 10 ++---
 6 files changed, 85 insertions(+), 40 deletions(-)

diff --git a/src/main/helpers/mediaTasksPlugin.ts b/src/main/helpers/mediaTasksPlugin.ts
index acf4ec2ed3..e250e82d6a 100644
--- a/src/main/helpers/mediaTasksPlugin.ts
+++ b/src/main/helpers/mediaTasksPlugin.ts
@@ -95,8 +95,9 @@ export default function registerMediaTasks() {
       } else if (!subtitle.metadata) {
         splayerxProxy.extractSubtitles(videoPath, streamIndex, 0, false, 1,
           (error, pos, data) => {
-            if (error || !data) reply(event, 'subtitle-metadata-reply', new Error(error));
-            else {
+            if (error || !data) {
+              reply(event, 'subtitle-metadata-reply', new Error(error || 'Missing subtitle data.'));
+            } else {
               subtitle.position = pos;
               subtitle.payload = subtitle.metadata = data.toString('utf8')
                 .replace(/\n(Dialogue|Comment)[\s\S]*/g, '')
@@ -105,7 +106,9 @@ export default function registerMediaTasks() {
             }
             reply(event, 'subtitle-metadata-reply', undefined, subtitle.finished, subtitle.metadata);
           });
-      } else reply(event, 'subtitle-metadata-reply', undefined, subtitle.finished, subtitle.metadata);
+      } else {
+        reply(event, 'subtitle-metadata-reply', undefined, subtitle.finished, subtitle.metadata);
+      }
       streamSubtitlesMap.set(streamIndex, subtitle);
     }
   });
@@ -132,8 +135,11 @@ export default function registerMediaTasks() {
             if (error === 'EOF') {
               subtitle.finished = true;
               reply(event, 'subtitle-cache-reply', undefined, subtitle.finished, subtitle.payload);
-            } else if (error) reply(event, 'subtitle-cache-reply', new Error(error));
-            else reply(event, 'subtitle-cache-reply', undefined, subtitle.finished);
+            } else if (error) {
+              reply(event, 'subtitle-cache-reply', new Error(error));
+            } else {
+              reply(event, 'subtitle-cache-reply', undefined, subtitle.finished);
+            }
           });
         streamSubtitlesMap.set(streamIndex, subtitle);
       } else reply(event, 'subtitle-cache-reply', new Error('Missing subtitle entry, should request metadata first.'));
@@ -146,8 +152,11 @@ export default function registerMediaTasks() {
       if (subtitle) {
         splayerxProxy.extractSubtitles(videoPath, streamIndex, time, true, 20,
           (error, pos, data) => {
-            if (data) reply(event, 'subtitle-stream-reply', undefined, data.toString('utf8'));
-            else reply(event, 'subtitle-stream-reply', new Error(!error || !data ? 'Missing data' : error));
+            if (data) {
+              reply(event, 'subtitle-stream-reply', undefined, data.toString('utf8'));
+            } else {
+              reply(event, 'subtitle-stream-reply', new Error(!error || !data ? 'Missing subtitle data' : error));
+            }
           });
       } else reply(event, 'subtitle-stream-reply', new Error('Missing subtitle entry, should request metadata first.'));
     } else reply(event, 'subtitle-stream-reply', new Error('Missing videoPath entry, should request metadata first.'));
diff --git a/src/renderer/constants.js b/src/renderer/constants.js
index 9dcc844e4d..56997bcdff 100644
--- a/src/renderer/constants.js
+++ b/src/renderer/constants.js
@@ -1,8 +1,6 @@
-import electron from 'electron';
+import { remote } from 'electron';
 import { join } from 'path';
 
-const app = electron.app || electron.remote.app;
-
 export const DEFAULT_VIDEO_EVENTS = [
   'abort',
   'canplay',
@@ -138,8 +136,8 @@ export const DEFAULT_LOG_DIRNAME = 'logs';
  */
 export const VIDEO_DIRNAME = 'videos'; // 视频缓存目录
 export const SUBTITLE_DIRNAME = 'subtitles'; // 视频缓存目录
-export const SUBTITLE_REAL_DIRNAME = join(
-  app.getPath(ELECTRON_CACHE_DIRNAME),
+export const SUBTITLE_FULL_DIRNAME = join(
+  remote.app.getPath(ELECTRON_CACHE_DIRNAME),
   DEFAULT_DIRNAME,
   SUBTITLE_DIRNAME,
 );
diff --git a/src/renderer/interfaces/ISubtitle.ts b/src/renderer/interfaces/ISubtitle.ts
index 14c791c13c..a8af479161 100644
--- a/src/renderer/interfaces/ISubtitle.ts
+++ b/src/renderer/interfaces/ISubtitle.ts
@@ -17,18 +17,24 @@ export enum Format {
   Unknown = 'unknown',
 }
 
+/** subtitle source used to retrieve subtitle or display info */
 export interface IOrigin {
   type: Type;
   source: unknown;
 }
+/** necessary subtitle information */
 export interface IEntity {
+  /** subtitle source used to display info, like in SubtitleControl */
   displaySource: IOrigin;
+  /** subtitle source used to retrieve real subtitle */
   realSource: IOrigin;
+  /** subtitle unique id (determined upon first created) */
   hash: string;
   format: Format;
   language: LanguageCode;
   delay: number;
 }
+/** provide necessary subtitle info from variant sources */
 export interface IEntityGenerator {
   getDisplaySource(): Promise<IOrigin>;
   getRealSource(): Promise<IOrigin>;
@@ -36,47 +42,74 @@ export interface IEntityGenerator {
   getFormat(): Promise<Format>
   getLanguage(): Promise<LanguageCode>
   getDelay(): Promise<number>
+  /** get raw video segments (which can be restored as IVideoSegments) */
   getVideoSegments?: () => Promise<IRawVideoSegment[]>
+  /** whether this subtitle has been auto uploaded */
   getAutoUploaded?: () => Promise<boolean>
 }
+/** necessary subtitle info used to display in SubtitleControl */
 export interface ISubtitleControlListItem {
+  /** subtitle uuid (generated at every initialization, not like hash) */
   id: string;
+  /** subtitle unique id (determined upon first created) */
   hash: string;
   type: Type;
   language: LanguageCode;
   source: IOrigin;
+  /** subtitle final name (can be changed at certain circumstances) */
   name?: string;
 }
+/** get real payload from subtitle real source (with streaming support) */
 export interface ILoader {
   readonly source: IOrigin;
+  /** whether this subtitle can be preloaded (online subtitle, local subtitle e.g.) */
   readonly canPreload: boolean;
+  /** whether this subtitle can be cached */
   readonly canCache: boolean;
+  /** whether this subtitle can be uploaded */
   readonly canUpload: boolean;
+  /** whether this subtitle has been fully read */
   readonly fullyRead: boolean;
+  /** get subtitle payload (param time may be unsupported) */
   getPayload(time?: number): Promise<unknown>;
+  /** pause the subtitle loading process (may be unsupported) */
   pause(): void | Promise<void>;
+  /** cache the loaded subtitle (only if it can be cached) */
   cache(): Promise<IOrigin>;
+  /** notify outside the loading process (mainly for reactivity use) */
   on(event: 'cache' | 'read' | 'upload', callback: (result: boolean) => void): void;
+  /** notify outside the loading process once (mainly for reactivity use) */
   once(event: 'cache' | 'read' | 'upload', callback: (result: boolean) => void): void;
+  /** release the resources used */
   destroy(): Promise<void>
 }
+/** subtitle loader controller and parser */
 export interface IParser {
   readonly format: Format;
   readonly loader: ILoader;
+  /** to update/get subtitle played time */
   readonly videoSegments: IVideoSegments;
   getMetadata(): Promise<IMetadata>;
   getDialogues(time?: number): Promise<Cue[]>;
 }
+/** pieces of start and end time */
 export interface ITimeSegments {
+  /** insert start time and end time */
   insert(start: number, end: number): void;
+  /** check if given time is in range */
   check(time: number): boolean;
 }
 export interface IVideoSegments extends ITimeSegments {
+  /** update video segments' played status by two timestamps */
   updatePlayed(timeStamp: number, lastTimeStamp?: number): void;
-  playedTime: number;
+  /** subtitle's played time (generated by video segments' played status) */
+  readonly playedTime: number;
+  /** export raw video segments */
   export(): IRawVideoSegment[];
+  /** restore from raw video segments */
   restore(videoSegments: IRawVideoSegment[]): void;
 }
+/** like video segments, but in a readable manner */
 export interface IRawVideoSegment {
   start: number;
   end: number;
@@ -116,14 +149,4 @@ export type Cue = {
   tags: ITags,
 }
 
-export type Subtitle = {
-  id: string
-  name: string,
-  language: string,
-  format?: string,
-  rank: number,
-  loading: string,
-  type: string,
-}
-
 export const NOT_SELECTED_SUBTITLE = 'NOT_SELECTED_SUBTITLE';
diff --git a/src/renderer/libs/TimeSegments.ts b/src/renderer/libs/TimeSegments.ts
index 3dfd0f7f15..5cd06c6393 100644
--- a/src/renderer/libs/TimeSegments.ts
+++ b/src/renderer/libs/TimeSegments.ts
@@ -1,14 +1,16 @@
 import { ITimeSegments, IVideoSegments } from '@/interfaces/ISubtitle';
 
+/** basic time segments, used to check whether a given time is in range */
 export class StreamTimeSegments implements ITimeSegments {
   private startTimestamps: number[] = [];
 
   private endTimestamps: number[] = [];
 
-  private isValidNumber(num: number) {
+  private isValidTimestamp(num: number) {
     return typeof num === 'number' && Number.isFinite(num) && !Number.isNaN(num) && num >= 0;
   }
 
+  /** also return the index for insertion use */
   private checkWithIndex(time: number) {
     const index = this.startTimestamps.findIndex((timestamp, index, arr) => (
       timestamp <= time && (!arr[index + 1] || arr[index + 1] >= time)
@@ -22,7 +24,7 @@ export class StreamTimeSegments implements ITimeSegments {
   public check(time: number) { return this.checkWithIndex(time).in; }
 
   public insert(start: number, end: number) {
-    if (this.isValidNumber(start) && this.isValidNumber(end) && start !== end) {
+    if (this.isValidTimestamp(start) && this.isValidTimestamp(end) && start !== end) {
       const [startTime, endTime] = [start, end].sort();
       const { in: startIn, index: startIndex } = this.checkWithIndex(startTime);
       const { in: endIn, index: endIndex } = this.checkWithIndex(endTime);
@@ -43,15 +45,23 @@ export class StreamTimeSegments implements ITimeSegments {
     }
   }
 
+  /**
+   * Seperate insertions can be problematic because there
+   * are margins between different segments.
+   * Since subtitles are bulk retrieved, why not bulk insert segments?
+   * @param segments time segments
+   * @param time current video time, because subtitle start may be later than video time.
+   */
   public bulkInsert(segments: [number, number][], time: number) {
     const allTimeStamps = segments.flatMap(nums => nums)
       .concat([time])
-      .filter(num => this.isValidNumber(num));
+      .filter(num => this.isValidTimestamp(num));
     this.insert(Math.min(...allTimeStamps), Math.max(...allTimeStamps));
   }
 }
-
+/** time segments with played time support */
 export class VideoTimeSegments implements IVideoSegments {
+  /** video's duration (also the highest number in timestamps) */
   private duration: number = 0;
 
   private timestamps: number[] = [];
@@ -59,19 +69,19 @@ export class VideoTimeSegments implements IVideoSegments {
   private played: boolean[] = [];
 
   public constructor(duration: number) {
-    if (!this.isValidNumber(duration)) throw new Error('Duration should be a valid number.');
+    if (!this.isValidTimestamp(duration)) throw new Error('Duration should be a valid number.');
     this.duration = duration;
     this.timestamps.push(0, this.duration);
     this.played.push(false);
   }
 
-  private isValidNumber(num: number) {
+  private isValidTimestamp(num: number) {
     return typeof num === 'number' && Number.isFinite(num) && !Number.isNaN(num) && num > 0
       && (!this.duration || (this.duration && num <= this.duration));
   }
 
   public insert(start: number, end: number) {
-    if (this.isValidNumber(start) && this.isValidNumber(end)) {
+    if (this.isValidTimestamp(start) && this.isValidTimestamp(end)) {
       start = Math.min(start, end);
       const result = this.checkWithIndex(start);
       if (result.in && this.timestamps[result.index] !== start) {
@@ -81,6 +91,7 @@ export class VideoTimeSegments implements IVideoSegments {
     }
   }
 
+  /** also return the index for insertion use */
   private checkWithIndex(time: number) {
     const index = this.timestamps.findIndex((timestamp, index, arr) => (
       timestamp <= time && (!arr[index + 1] || arr[index + 1] > time)
@@ -92,14 +103,15 @@ export class VideoTimeSegments implements IVideoSegments {
     };
   }
 
+  /** useless (because almost every timestamp is in range) */
   public check(time: number) { return this.checkWithIndex(time).in; }
 
-  private lastIndex: number = 0;
+  private lastIndex: number = -1;
 
   private lastPlayedTime: number = 0;
 
   public updatePlayed(timeStamp: number, lastTimeStamp: number = 0) {
-    if (this.isValidNumber(timeStamp) && this.isValidNumber(lastTimeStamp)) {
+    if (this.isValidTimestamp(timeStamp) && this.isValidTimestamp(lastTimeStamp)) {
       [timeStamp, lastTimeStamp] = [
         Math.max(timeStamp, lastTimeStamp),
         Math.min(timeStamp, lastTimeStamp),
@@ -108,11 +120,14 @@ export class VideoTimeSegments implements IVideoSegments {
       const { in: lastIn, index: lastIndex } = this.checkWithIndex(lastTimeStamp);
       if (currentIn && lastIn && !this.played[currentIndex]) {
         let playedTime = timeStamp - lastTimeStamp;
+        // played time should be in the same segment
         if (lastIndex !== currentIndex) playedTime = timeStamp - this.timestamps[currentIndex];
         if (this.lastIndex !== currentIndex) {
           this.lastIndex = currentIndex;
           this.lastPlayedTime = playedTime;
-        } else this.lastPlayedTime += playedTime;
+        } else {
+          this.lastPlayedTime += playedTime;
+        }
       }
       if (this.lastIndex !== -1) {
         const segmentTime = this.timestamps[this.lastIndex + 1] - this.timestamps[this.lastIndex];
diff --git a/src/renderer/services/storage/subtitle/index.ts b/src/renderer/services/storage/subtitle/index.ts
index cb73eeb634..bbb2f25ee2 100644
--- a/src/renderer/services/storage/subtitle/index.ts
+++ b/src/renderer/services/storage/subtitle/index.ts
@@ -5,7 +5,7 @@ import {
 import { LanguageCode } from '@/libs/language';
 import { SelectedSubtitle, IStoredSubtitleItem } from '@/interfaces/ISubtitleStorage';
 import { SubtitleDataBase } from './db';
-import { SUBTITLE_REAL_DIRNAME } from '@/constants';
+import { SUBTITLE_FULL_DIRNAME } from '@/constants';
 import { sourceToFormat } from '@/services/subtitle/utils';
 
 const db = new SubtitleDataBase();
@@ -139,7 +139,7 @@ export class DatabaseGenerator implements IEntityGenerator {
       const { sources, language } = storedSubtitle;
       newGenerator.realSource = sources
         .find(({ type, source }) => type === Type.Local
-          && dirname(source as string) === SUBTITLE_REAL_DIRNAME) || sources[0];
+          && dirname(source as string) === SUBTITLE_FULL_DIRNAME) || sources[0];
       newGenerator.format = sourceToFormat(newGenerator.realSource);
       newGenerator.language = language;
       newGenerator.hash = hash;
diff --git a/src/renderer/services/subtitle/utils/loaders.ts b/src/renderer/services/subtitle/utils/loaders.ts
index e0b74e768a..19246a470f 100644
--- a/src/renderer/services/subtitle/utils/loaders.ts
+++ b/src/renderer/services/subtitle/utils/loaders.ts
@@ -7,7 +7,7 @@ import {
   ILoader, IOrigin, Type, Format,
 } from '@/interfaces/ISubtitle';
 import { loadLocalFile, formatToExtension } from '.';
-import { SUBTITLE_REAL_DIRNAME } from '@/constants';
+import { SUBTITLE_FULL_DIRNAME } from '@/constants';
 import { mediaQuickHash, getSubtitleDir } from '@/libs/utils';
 import Sagi from '@/libs/sagi';
 import { SagiSubtitlePayload } from '../parsers';
@@ -45,7 +45,7 @@ export class LocalTextLoader extends EventEmitter implements ILoader {
   public constructor(path: string) {
     super();
     this.source = { type: Type.Local, source: path };
-    if (dirname(path) === SUBTITLE_REAL_DIRNAME) this._cacheStatus = Status.FINISHED;
+    if (dirname(path) === SUBTITLE_FULL_DIRNAME) this._cacheStatus = Status.FINISHED;
   }
 
   private _payloadString: string = '';
@@ -70,8 +70,8 @@ export class LocalTextLoader extends EventEmitter implements ILoader {
       const hash = await mediaQuickHash.try(source);
       if (hash) {
         this._cacheStatus = Status.WORKING;
-        const storedPath = join(SUBTITLE_REAL_DIRNAME, `${hash}${extname(source)}`);
-        ensureDirSync(SUBTITLE_REAL_DIRNAME);
+        const storedPath = join(SUBTITLE_FULL_DIRNAME, `${hash}${extname(source)}`);
+        ensureDirSync(SUBTITLE_FULL_DIRNAME);
         if (!existsSync(storedPath)) await copyFile(source, storedPath);
         this._cacheStatus = Status.FINISHED;
         return {
@@ -270,7 +270,7 @@ export class SagiLoader extends EventEmitter implements ILoader {
     if (this.canCache) {
       const { source } = this.source;
       this._cacheStatus = Status.NOT_STARTED;
-      const storedPath = join(SUBTITLE_REAL_DIRNAME, `${source}.${formatToExtension(Format.WebVTT)}`);
+      const storedPath = join(SUBTITLE_FULL_DIRNAME, `${source}.${formatToExtension(Format.WebVTT)}`);
       if (!existsSync(storedPath)) {
         await outputFile(storedPath, sagiSubtitleToWebVTT(this._payloads));
       }

From 6a41e10c9cdb9b46761c18a46a339a348df11ce4 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 13:45:11 +0800
Subject: [PATCH 084/123] style(sidebar): sidebar icon mouseover

---
 .../components/LandingView/BilibiliSidebarIcon.vue   | 12 ++----------
 .../components/LandingView/YoutubeSidebarIcon.vue    | 12 ++----------
 .../components/LandingView/iQiyiSidebarIcon.vue      | 12 ++----------
 3 files changed, 6 insertions(+), 30 deletions(-)

diff --git a/src/renderer/components/LandingView/BilibiliSidebarIcon.vue b/src/renderer/components/LandingView/BilibiliSidebarIcon.vue
index 1b1f32d98d..a2db409c70 100644
--- a/src/renderer/components/LandingView/BilibiliSidebarIcon.vue
+++ b/src/renderer/components/LandingView/BilibiliSidebarIcon.vue
@@ -1,7 +1,7 @@
 <template>
   <div 
-    @mouseover="handleMouseover"
-    @mouseout="handleMouseout"
+    @mouseover="mouseover = true"
+    @mouseout="mouseover = false"
     @mouseup="mouseupOnIcon(url)"
     :style="{
       opacity: mouseover || selected ? '1.0' : '0.7',
@@ -105,14 +105,6 @@ export default {
       mouseover: false,
     };
   },
-  methods: {
-    handleMouseover() {
-      this.mouseover = true;
-    },
-    handleMouseout() {
-      this.mouseover = false;
-    },
-  },
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/renderer/components/LandingView/YoutubeSidebarIcon.vue b/src/renderer/components/LandingView/YoutubeSidebarIcon.vue
index c869e4869c..b591b6fdda 100644
--- a/src/renderer/components/LandingView/YoutubeSidebarIcon.vue
+++ b/src/renderer/components/LandingView/YoutubeSidebarIcon.vue
@@ -1,7 +1,7 @@
 <template>
   <div 
-    @mouseover="handleMouseover"
-    @mouseout="handleMouseout"
+    @mouseover="mouseover = true"
+    @mouseout="mouseover = false"
     @mouseup="mouseupOnIcon(url)"
     :style="{
       opacity: mouseover || selected ? '1.0' : '0.7',
@@ -105,14 +105,6 @@ export default {
       mouseover: false,
     };
   },
-  methods: {
-    handleMouseover() {
-      this.mouseover = true;
-    },
-    handleMouseout() {
-      this.mouseover = false;
-    },
-  },
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/renderer/components/LandingView/iQiyiSidebarIcon.vue b/src/renderer/components/LandingView/iQiyiSidebarIcon.vue
index 3ba56e2c21..03d54e1949 100644
--- a/src/renderer/components/LandingView/iQiyiSidebarIcon.vue
+++ b/src/renderer/components/LandingView/iQiyiSidebarIcon.vue
@@ -1,7 +1,7 @@
 <template>
   <div 
-    @mouseover="handleMouseover"
-    @mouseout="handleMouseout"
+    @mouseover="mouseover = true"
+    @mouseout="mouseover = false"
     @mouseup="mouseupOnIcon(url)"
     :style="{
       opacity: mouseover || selected ? '1.0' : '0.7',
@@ -104,14 +104,6 @@ export default {
       mouseover: false,
     };
   },
-  methods: {
-    handleMouseover() {
-      this.mouseover = true;
-    },
-    handleMouseout() {
-      this.mouseover = false;
-    },
-  },
 };
 </script>
 <style lang="scss" scoped>

From d96908e6a21b0c3fba33f7ea8e8e2b793480ab18 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 14:13:54 +0800
Subject: [PATCH 085/123] feat(browsing): pip control

---
 src/renderer/assets/icon/pip-default-icon.svg |  6 ++---
 src/renderer/assets/icon/pop-default-icon.svg |  8 ++++++
 src/renderer/components/BaseIconContainer.vue |  2 +-
 .../BrowsingView/BrowsingPipControl.vue       | 26 ++++++++++++++++---
 4 files changed, 33 insertions(+), 9 deletions(-)
 create mode 100644 src/renderer/assets/icon/pop-default-icon.svg

diff --git a/src/renderer/assets/icon/pip-default-icon.svg b/src/renderer/assets/icon/pip-default-icon.svg
index 653e64813a..efa7d53fec 100644
--- a/src/renderer/assets/icon/pip-default-icon.svg
+++ b/src/renderer/assets/icon/pip-default-icon.svg
@@ -1,9 +1,7 @@
 <svg width="18px" height="14px" viewBox="0 0 18 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="menuBar/__button/--withMoreType" transform="translate(-11.000000, -13.000000)" fill="#6F7078" fill-rule="nonzero">
-            <g id="icon" transform="translate(11.000000, 13.000000)">
-                <path d="M16.542,0.25 C17.3472312,0.25 18,0.902768835 18,1.708 L18,12.292 C18,13.0972312 17.3472312,13.75 16.542,13.75 L1.458,13.75 C0.652768835,13.75 0,13.0972312 0,12.292 L0,1.708 C0,0.902768835 0.652768835,0.25 1.458,0.25 L16.542,0.25 Z M16.02,1.75 L1.98,1.75 C1.71490332,1.75 1.5,1.96490332 1.5,2.23 L1.5,11.77 C1.5,12.0350967 1.71490332,12.25 1.98,12.25 L16.02,12.25 C16.2850967,12.25 16.5,12.0350967 16.5,11.77 L16.5,2.23 C16.5,1.96490332 16.2850967,1.75 16.02,1.75 Z M13.6663035,5.4737013 C13.9347139,5.4737013 14.1523035,5.69129091 14.1523035,5.9597013 L14.1523035,9.7877013 C14.1523035,10.0561117 13.9347139,10.2737013 13.6663035,10.2737013 L7.20176158,10.2737013 C6.9333512,10.2737013 6.71576158,10.0561117 6.71576158,9.7877013 L6.71576158,5.9597013 C6.71576158,5.69129091 6.9333512,5.4737013 7.20176158,5.4737013 L13.6663035,5.4737013 Z" id="icon-pictureInPicture"></path>
-            </g>
+        <g id="menuBar/__icon/--pictureInPicture" transform="translate(-6.000000, -8.000000)" fill="#B8BACC" fill-rule="nonzero">
+            <path d="M22.542,8.25 C23.3472312,8.25 24,8.90276883 24,9.708 L24,20.292 C24,21.0972312 23.3472312,21.75 22.542,21.75 L7.458,21.75 C6.65276883,21.75 6,21.0972312 6,20.292 L6,9.708 C6,8.90276883 6.65276883,8.25 7.458,8.25 L22.542,8.25 Z M22.02,9.75 L7.98,9.75 C7.71490332,9.75 7.5,9.96490332 7.5,10.23 L7.5,19.77 C7.5,20.0350967 7.71490332,20.25 7.98,20.25 L22.02,20.25 C22.2850967,20.25 22.5,20.0350967 22.5,19.77 L22.5,10.23 C22.5,9.96490332 22.2850967,9.75 22.02,9.75 Z M19.6663035,13.4737013 C19.9347139,13.4737013 20.1523035,13.6912909 20.1523035,13.9597013 L20.1523035,17.7877013 C20.1523035,18.0561117 19.9347139,18.2737013 19.6663035,18.2737013 L13.2017616,18.2737013 C12.9333512,18.2737013 12.7157616,18.0561117 12.7157616,17.7877013 L12.7157616,13.9597013 C12.7157616,13.6912909 12.9333512,13.4737013 13.2017616,13.4737013 L19.6663035,13.4737013 Z" id="icon-pictureInPicture"></path>
         </g>
     </g>
 </svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/pop-default-icon.svg b/src/renderer/assets/icon/pop-default-icon.svg
new file mode 100644
index 0000000000..93ea84e0f1
--- /dev/null
+++ b/src/renderer/assets/icon/pop-default-icon.svg
@@ -0,0 +1,8 @@
+
+<svg width="19px" height="15px" viewBox="0 0 19 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="menuBar/__icon/--pictureOutPicture" transform="translate(-6.000000, -8.000000)" fill="#B8BACC" fill-rule="nonzero">
+            <path d="M21.542,8.75 C22.3472312,8.75 23,9.40276883 23,10.208 L23,15.5 L24.389,15.5 C24.6574104,15.5 24.875,15.7175896 24.875,15.986 L24.875,21.764 C24.875,22.0324104 24.6574104,22.25 24.389,22.25 L15.111,22.25 C14.8425896,22.25 14.625,22.0324104 14.625,21.764 L14.625,20.75 L7.458,20.75 C6.65276883,20.75 6,20.0972312 6,19.292 L6,10.208 C6,9.40276883 6.65276883,8.75 7.458,8.75 L21.542,8.75 Z M21.02,10.25 L7.98,10.25 C7.71490332,10.25 7.5,10.4649033 7.5,10.73 L7.5,18.77 C7.5,19.0350967 7.71490332,19.25 7.98,19.25 L14.625,19.25 L14.625,15.986 C14.625,15.7175896 14.8425896,15.5 15.111,15.5 L21.5,15.5 L21.5,10.73 C21.5,10.4649033 21.2850967,10.25 21.02,10.25 Z" id="icon--pictureOutPicture"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/components/BaseIconContainer.vue b/src/renderer/components/BaseIconContainer.vue
index 6da98db83d..13402869c0 100644
--- a/src/renderer/components/BaseIconContainer.vue
+++ b/src/renderer/components/BaseIconContainer.vue
@@ -630,7 +630,7 @@ screen and (min-aspect-ratio: 1/1) and (min-height: 1080px) {
   width: 20px;
   height: 20px;
 }
-.pip, .pipDisabled{
+.pip, .pop, .pipDisabled {
   width: 18px;
   height: 14px;
 }
diff --git a/src/renderer/components/BrowsingView/BrowsingPipControl.vue b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
index b6c4f4fb93..177fff3e87 100644
--- a/src/renderer/components/BrowsingView/BrowsingPipControl.vue
+++ b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
@@ -3,15 +3,20 @@
     class="pip-control"
   >
     <div
-      @mouseup="handleGlobalPip"
+      @mouseup="handlePip"
       class="pip-icon no-drag"
     >
       <Icon
-        :type="picInPicType"
+        :type="pipType"
       />
     </div>
     <div
       @mouseup="switchPipType"
+      @mouseover="mouseover = true"
+      @mouseout="mouseover = false"
+      :style="{
+        opacity: mouseover ? 1.0 : 0.7,
+      }"
       class="down-icon"
     >
       <Icon
@@ -42,12 +47,25 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      pip: 'Enter',
+    };
+  },
   computed: {
-    picInPicType() {
-      return this.hasVideo ? 'pip' : 'pipDisabled';
+    pipType() {
+      if (!this.hasVideo) return 'pipDisabled';
+      else if (this.pip === 'Enter') return 'pip';
+      return 'pop';
     },
   },
   methods: {
+    handlePip() {
+      this.pip === 'Enter' ? this.handleEnterPip() : this.handleGlobalPip();
+    },
+    switchPipType() {
+      this.pip = this.pip === 'Enter' ? 'Global' : 'Enter';
+    },
   },
 };
 </script>

From cf24f555d42874d6c848deb8d19bd573beceea73 Mon Sep 17 00:00:00 2001
From: Sin <dev@zouxin.net>
Date: Fri, 6 Sep 2019 14:39:55 +0800
Subject: [PATCH 086/123] build(electron): try fix ci error

---
 package.json            | 2 --
 scripts/post-install.js | 1 -
 2 files changed, 3 deletions(-)

diff --git a/package.json b/package.json
index b93b3bf8e6..1c6b58eeec 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,6 @@
     "pack": "npm run pack:main && npm run pack:renderer",
     "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
     "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
-    "rebuild:win-mouse": "electron-rebuild -f -e node_modules/@chiflix/electron -w win-mouse",
     "test": "npm run unit",
     "unit": "karma start test/unit/karma.conf.js",
     "postinstall": "node ./scripts/post-install.js"
@@ -136,7 +135,6 @@
     "electron-builder": "21.2.0",
     "electron-debug": "^3.0.1",
     "electron-mocha": "^8.1.2",
-    "electron-rebuild": "^1.8.6",
     "eslint": "^5.16.0",
     "eslint-config-airbnb-base": "^13.1.0",
     "eslint-friendly-formatter": "^4.0.1",
diff --git a/scripts/post-install.js b/scripts/post-install.js
index 738156a8a7..1418ceafb4 100644
--- a/scripts/post-install.js
+++ b/scripts/post-install.js
@@ -8,7 +8,6 @@ const commands = ['npx rimraf node_modules/**/.git', 'npm run lint:fix'];
 
 if (process.platform === 'win32') {
   commands.push('npm run install-app-deps');
-  commands.push('npm run rebuild:win-mouse');
 }
 
 exec(commands.join('&&'), (error, stdout) => {

From 85d0a0cb111b1092bc0a2a058102c3f22d06fcbb Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 14:51:30 +0800
Subject: [PATCH 087/123] feat(browsing): pip switch mode

---
 .../assets/icon/pageRefresh-default-icon.svg  |  2 +-
 .../assets/icon/pipDisabled-default-icon.svg  |  4 +-
 src/renderer/components/BrowsingView.vue      |  1 +
 .../BrowsingView/BrowsingHeader.vue           |  5 ++-
 .../BrowsingView/BrowsingPipControl.vue       | 37 +++++++++++++------
 5 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/src/renderer/assets/icon/pageRefresh-default-icon.svg b/src/renderer/assets/icon/pageRefresh-default-icon.svg
index 5ff0e26d9a..71ff9a77e5 100644
--- a/src/renderer/assets/icon/pageRefresh-default-icon.svg
+++ b/src/renderer/assets/icon/pageRefresh-default-icon.svg
@@ -3,7 +3,7 @@
     <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
     <desc>Created with Sketch.</desc>
     <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="browseing" transform="translate(-340.000000, -323.000000)" fill="#BBBACC" fill-rule="nonzero">
+        <g id="browseing" transform="translate(-340.000000, -323.000000)" fill="#6E7085" fill-rule="nonzero">
             <g id="control-bar" transform="translate(238.000000, 300.000000)">
                 <g id="icon-refresh" transform="translate(98.000000, 19.000000)">
                     <path d="M19.9275636,23.9920296 C20.3650254,23.4227245 20.2581454,22.6065787 19.6888403,22.1691168 C19.1195352,21.7316549 18.3033893,21.838535 17.8659275,22.4078401 C16.98761,23.5508667 16.3399248,24.4093268 15.9201976,24.9870317 C15.70106,25.2886488 15.5406853,25.5182327 15.433665,25.684841 C15.3602796,25.7990867 15.3053307,25.8928755 15.2591332,25.9907264 C15.2027547,26.105821 15.2027547,26.105821 15.1306023,26.4247782 C15.0986066,26.7012347 15.0986066,26.7012347 15.3087888,27.266275 C15.8834144,27.8466713 15.8834144,27.8466713 16.4822263,27.8963696 C22.760792,27.6355905 27.8,22.2689278 27.8,15.9070924 C27.8,12.4110703 26.2702442,9.16081599 23.6658784,6.9325943 C21.5446155,5.11770182 18.8489726,4.10249962 16,4.10249962 C9.48291266,4.10249962 4.2,9.38772305 4.2,15.9070924 C4.2,18.5715924 5.08653001,21.1044742 6.69120849,23.1623351 C7.83714485,24.631899 9.3164956,25.8144882 11.0052919,26.6047987 C11.6555786,26.9091151 12.4294372,26.6286508 12.7337536,25.9783642 C13.03807,25.3280775 12.7576057,24.5542189 12.107319,24.2499025 C10.7908372,23.633825 9.63608734,22.7107209 8.74153335,21.563533 C7.49000766,19.9585599 6.8,17.9871571 6.8,15.9070924 C6.8,10.8234089 10.9191076,6.70249962 16,6.70249962 C18.2232077,6.70249962 20.320979,7.49253827 21.9756109,8.90819441 C24.0085468,10.6475168 25.2,13.1789836 25.2,15.9070924 C25.2,19.7782293 22.8118095,23.1835609 19.4592128,24.603186 C19.6070218,24.4097288 19.7631448,24.2060013 19.9275636,23.9920296 Z" id="refresh" transform="translate(16.000000, 15.999435) rotate(-126.000000) translate(-16.000000, -15.999435) "></path>
diff --git a/src/renderer/assets/icon/pipDisabled-default-icon.svg b/src/renderer/assets/icon/pipDisabled-default-icon.svg
index 44400f2d8f..7d51db9103 100644
--- a/src/renderer/assets/icon/pipDisabled-default-icon.svg
+++ b/src/renderer/assets/icon/pipDisabled-default-icon.svg
@@ -2,8 +2,8 @@
 <svg width="30px" height="23px" viewBox="0 0 30 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
     <desc>Created with Sketch.</desc>
-    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.15">
-        <g id="browseing" transform="translate(-431.000000, -324.000000)" fill="#BBBACC">
+    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="1">
+        <g id="browseing" transform="translate(-431.000000, -324.000000)" fill="#6E7085">
             <g id="control-bar" transform="translate(238.000000, 300.000000)">
                 <g id="icon-pictureInPicture" transform="translate(192.000000, 19.000000)">
                     <path d="M3.43,5 L28.57,5 C29.9120519,5 31,6.08794806 31,7.43 L31,25.07 C31,26.4120519 29.9120519,27.5 28.57,27.5 L3.43,27.5 C2.08794806,27.5 1,26.4120519 1,25.07 L1,7.43 C1,6.08794806 2.08794806,5 3.43,5 Z M3.5,8.3 L3.5,24.2 C3.5,24.6418278 3.8581722,25 4.3,25 L27.7,25 C28.1418278,25 28.5,24.6418278 28.5,24.2 L28.5,8.3 C28.5,7.8581722 28.1418278,7.5 27.7,7.5 L4.3,7.5 C3.8581722,7.5 3.5,7.8581722 3.5,8.3 Z M14.6696026,14.5395022 L25.4438391,14.5395022 C25.8911898,14.5395022 26.2538391,14.9021515 26.2538391,15.3495022 L26.2538391,21.7295022 C26.2538391,22.1768528 25.8911898,22.5395022 25.4438391,22.5395022 L14.6696026,22.5395022 C14.222252,22.5395022 13.8596026,22.1768528 13.8596026,21.7295022 L13.8596026,15.3495022 C13.8596026,14.9021515 14.222252,14.5395022 14.6696026,14.5395022 Z" id="pictureInPicture"></path>
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index ae9f05ced4..2a40f3018d 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -10,6 +10,7 @@
       ref="browsingHeader"
       :show-sidebar="showSidebar"
       :title="title"
+      :has-vide="hasVideo"
       :handle-enter-pip="handleEnterPip"
       :handle-global-pip="handleGlobalPip"
       :handle-url-reload="handleUrlReload"
diff --git a/src/renderer/components/BrowsingView/BrowsingHeader.vue b/src/renderer/components/BrowsingView/BrowsingHeader.vue
index 5019d0f4c0..141b1209d3 100644
--- a/src/renderer/components/BrowsingView/BrowsingHeader.vue
+++ b/src/renderer/components/BrowsingView/BrowsingHeader.vue
@@ -69,13 +69,16 @@ export default {
       type: Function,
       required: true,
     },
+    hasVideo: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
       showOpenUrl: false,
       backType: 'backDisabled',
       forwardType: 'forwardDisabled',
-      hasVideo: false,
       url: '',
       canGoBack: false,
       canGoForward: false,
diff --git a/src/renderer/components/BrowsingView/BrowsingPipControl.vue b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
index 177fff3e87..7896f19ee5 100644
--- a/src/renderer/components/BrowsingView/BrowsingPipControl.vue
+++ b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
@@ -4,6 +4,10 @@
   >
     <div
       @mouseup="handlePip"
+      :style="{
+        opacity: hasVideo ? 1.0 : 0.3,
+      }"
+      :class="hasVideo ? 'button-hover': ''"
       class="pip-icon no-drag"
     >
       <Icon
@@ -15,7 +19,7 @@
       @mouseover="mouseover = true"
       @mouseout="mouseover = false"
       :style="{
-        opacity: mouseover ? 1.0 : 0.7,
+        opacity: mouseover ? 1.0 : 0.3,
       }"
       class="down-icon"
     >
@@ -54,9 +58,7 @@ export default {
   },
   computed: {
     pipType() {
-      if (!this.hasVideo) return 'pipDisabled';
-      else if (this.pip === 'Enter') return 'pip';
-      return 'pop';
+      return this.pip === 'Enter' ? 'pipDisabled' : 'pop';
     },
   },
   methods: {
@@ -86,21 +88,34 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    transition: background-color 100ms ease-in;
-    &:hover {
-      background-color: #F5F6F8;
-    }
+    transition: background-color 100ms ease-in, opacity 100ms ease-in;
+  }
+  .button-hover:hover {
+    background-color: #F5F6F8;
   }
   .down-icon {
-    width: 8px;
+    width: 23px;
     height: 20px;
-    margin-right: 15px;
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
     .icon {
       margin-top: 1px;
     }
   }
+  @keyframes translate {
+    0% {
+      transfrom: translateX(0);
+    };
+    50% {
+      transfrom: translateX(10px);
+    };
+    100% {
+      transfrom: translateX(0);
+    };
+  }
+  .translate {
+    animation: translate 100ms linear 1 normal forwards;
+  }
 }
 </style>

From 6a7e896b61c1cb395c160b4a58e6b4a8351c9d3c Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Fri, 6 Sep 2019 15:38:45 +0800
Subject: [PATCH 088/123] feat(browsingview): add pip menu and can stop reload

---
 build/icons/mojave-pip.png                    | Bin 0 -> 228 bytes
 build/icons/mojave-window.png                 | Bin 0 -> 230 bytes
 build/icons/normal-pip.png                    | Bin 0 -> 278 bytes
 build/icons/normal-window.png                 | Bin 0 -> 223 bytes
 src/main/index.js                             |   5 +
 src/main/menu/Menu.ts                         |  61 ++++++-----
 src/main/menu/MenuService.ts                  |   4 +
 src/main/menu/common/Menubar.ts               |   1 +
 src/main/menu/menu.json                       |   8 ++
 .../assets/icon/reloadStop-default-icon.svg   |   7 ++
 src/renderer/components/BaseIconContainer.vue |   2 +-
 src/renderer/components/BrowsingView.vue      |  97 +++++++++++-------
 .../BrowsingView/BrowsingHeader.vue           |  13 ++-
 .../components/BrowsingView/BrowsingInput.vue |   6 +-
 .../BrowsingView/BrowsingPipControl.vue       |   8 +-
 src/renderer/locales/lang/en.json             |   4 +-
 src/renderer/main.ts                          |   5 +-
 17 files changed, 140 insertions(+), 81 deletions(-)
 create mode 100644 build/icons/mojave-pip.png
 create mode 100644 build/icons/mojave-window.png
 create mode 100644 build/icons/normal-pip.png
 create mode 100644 build/icons/normal-window.png
 create mode 100644 src/renderer/assets/icon/reloadStop-default-icon.svg

diff --git a/build/icons/mojave-pip.png b/build/icons/mojave-pip.png
new file mode 100644
index 0000000000000000000000000000000000000000..ddd34d8b67493b4789cf0e39b5091ccce0d82983
GIT binary patch
literal 228
zcmeAS@N?(olHy`uVBq!ia0vp^0zfRn!3HE-lJ=GZDaPU;cPEB*=VV?2IrBVS978Mw
zlM^IZdH(<Z|DNs9eFq;chL<nXScLXBKHMSDQ9emx-aCh{9~HzK95gy-IsS5Tl$z;r
zwPW2p)>wvP>{4<JDaD6>cznrpb2}DoU>C;RFzaR`*R{hU3oiyY{*jp>aWrnh4Td#w
z3|8;;1@1E^<s^P!c~&FPdzB$U;V<JUO=ayPN7*D9g5L1)Sj1!%bT$iJlJA;qq<7hU
bk_Cg|-lfH@C+4jIx|G4w)z4*}Q$iB}Uffgb

literal 0
HcmV?d00001

diff --git a/build/icons/mojave-window.png b/build/icons/mojave-window.png
new file mode 100644
index 0000000000000000000000000000000000000000..8378801c512f00e5dbf2ab6cdb171b7cfffc3cee
GIT binary patch
literal 230
zcmeAS@N?(olHy`uVBq!ia0vp^f<P?7!3HF=7hLlMQjEnx?oJHr&dIz4au#^HIEGjV
zCMQU+N+^E#|Np<9!avp{OPYcmcw-cpB^!J0J5+HB<TG;$aJn?UTE?`|Tv_?C8QY4l
z6J4^{w3&A@tU52Ra=@i4EhekIL(!rBHS@>#75^WKT!@Ze7<ZdN<d4S*Ya557EmuAq
z6ft<jWs-En@#PcIfQQlw`<h&vIRefIc3X4_oKU^!P$TC$WtPkW?Tu_YHZ6)h{a3aW
d@0h{Lu)bsArqF!JpFp=Vc)I$ztaD0e0ssYnQoR5G

literal 0
HcmV?d00001

diff --git a/build/icons/normal-pip.png b/build/icons/normal-pip.png
new file mode 100644
index 0000000000000000000000000000000000000000..eccb22316423c70b89218d8999bc11ae5f8b7757
GIT binary patch
literal 278
zcmV+x0qOpUP)<h;3K|Lk000e1NJLTq000mG000yS1^@s6gkrsS00001b5ch_0Itp)
z=>Px#&`Cr=R5%f1U>F6Aii(Qej0}tg|NsAIAtg8%85#flXZSyXQAtthH&Ek3AZI5@
z1~4$X1J%c~fNf@E*m?i{{nexx0CYJ6!+(ZkCQ>wEQ;XBz%F4<CK-Y0&(RBLWy?eJ{
z;#dt(QBh(4`{(a^m?C5v7<f~G{2Z7V#a^J;0IXh+k&*fP@WI1-K<8qH0VBf`nDaq2
zRs#+kIPeE3r;Mx+7n=o?qJWa_;CRKQ3X3=}^|~`KGW=lyCr4mX1|<qC>TnAIHG}lx
cRxom800_i4R$Eel_W%F@07*qoM6N<$f^J%G7ytkO

literal 0
HcmV?d00001

diff --git a/build/icons/normal-window.png b/build/icons/normal-window.png
new file mode 100644
index 0000000000000000000000000000000000000000..44be09cbe3af7ebc1d9b681ca898f827f7156018
GIT binary patch
literal 223
zcmeAS@N?(olHy`uVBq!ia0vp^f<P?7!3HF=7hLlMQjEnx?oJHr&dIz4a%OtEIEGjV
zCMQU+-f&vLt?`4q<NxFif5xlDjE2n00{___sXFZ8?dW7(<j@-2ctg75;4cTg4wj@K
zh7+s`wf_`+eH5C43`%$|vR8f87g&7!PI!hu4#OpR&dPT76&(|#>}D_pgiPjjm=(|X
zQCeYN(@_z@1v8Yz3Plvt6y7rlcrzGw^zu2pbQFx85MsBk!Iket{}L%Hp)1S`=k2vb
Ut_khF0(2yUr>mdKI;Vst0OL<b;{X5v

literal 0
HcmV?d00001

diff --git a/src/main/index.js b/src/main/index.js
index 8813fc02e5..1d2798e86d 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -1159,6 +1159,11 @@ if (process.platform === 'darwin') {
 }
 
 app.on('ready', () => {
+  systemPreferences.subscribeNotification('AppleInterfaceThemeChangedNotification', () => {
+    if (routeName === 'browsing-view') {
+      menuService.updatePipIcon(systemPreferences.isDarkMode());
+    }
+  });
   menuService = new MenuService();
   if (process.platform === 'darwin') {
     systemPreferences.setUserDefault('NSDisabledDictationMenuItem', 'boolean', true);
diff --git a/src/main/menu/Menu.ts b/src/main/menu/Menu.ts
index 239d18a033..f9b366088e 100644
--- a/src/main/menu/Menu.ts
+++ b/src/main/menu/Menu.ts
@@ -1,15 +1,15 @@
 import {
-  Menu, MenuItem, app, shell,
+  app, Menu, MenuItem, shell, nativeImage, systemPreferences,
 } from 'electron';
 import { cloneDeep } from 'lodash';
 import {
-  MenubarMenuItem,
   IMenubarMenu,
-  IMenubarMenuItemSubmenu,
-  IMenubarMenuItemSeparator,
   IMenubarMenuItemAction,
   IMenubarMenuItemRole,
+  IMenubarMenuItemSeparator,
+  IMenubarMenuItemSubmenu,
   IMenubarMenuState,
+  MenubarMenuItem,
   MenuName,
 } from './common/Menubar';
 import { IsMacintosh } from '../../shared/common/platform';
@@ -69,11 +69,14 @@ export default class Menubar {
         this.updateMenuItemEnabled('history.forward', false);
         this.updateMenuItemEnabled('history.reload', false);
         this.updateMenuItemEnabled('browsing.window.pip', true);
+        this.updateMenuItemEnabled('browsing.window.playInNewWindow', true);
         this.updateMenuItemEnabled('browsing.window.keepPipFront', true);
         this.updateMenuItemLabel('browsing.window.pip', 'msg.window.exitPip');
+        this.updateMenuItemLabel('browsing.window.playInNewWindow', 'msg.window.backToBrowser');
       } else {
         this.updateMenuItemEnabled('browsing.window.keepPipFront', false);
         this.updateMenuItemLabel('browsing.window.pip', 'msg.window.enterPip');
+        this.updateMenuItemLabel('browsing.window.playInNewWindow', 'msg.window.playInNewWindow');
       }
       this.focusOnMainWindow = isMainWindow;
     }
@@ -221,6 +224,11 @@ export default class Menubar {
     }
   }
 
+  public updatePipIcon(isDarkMode: boolean) {
+    this.menubar.getMenuItemById('browsing.window.pip').icon = isDarkMode ? nativeImage.createFromDataURL(require('../../../build/icons/mojave-pip.png')) : nativeImage.createFromDataURL(require('../../../build/icons/mojave-window.png'));
+    this.menubar.getMenuItemById('browsing.window.playInNewWindow').icon = isDarkMode ? nativeImage.createFromDataURL(require('../../../build/icons/mojave-window.png')) : nativeImage.createFromDataURL(require('../../../build/icons/normal-window.png'));
+  }
+
   public updateMenuItemEnabled(id: string, enabled: boolean) {
     const result = this.getMenuStateById(id);
     // @ts-ignore
@@ -737,62 +745,52 @@ export default class Menubar {
     ]);
     actions.forEach(i => applicationMenu.append(i));
 
-    const applicationMenuItem = new MenuItem({ label: this.$t('msg.splayerx.name'), submenu: applicationMenu });
-    return applicationMenuItem;
+    return new MenuItem({ label: this.$t('msg.splayerx.name'), submenu: applicationMenu });
   }
 
   private createFileMenu(): Electron.MenuItem {
     const fileMenu = this.convertFromMenuItemTemplate('file');
-    const fileMenuItem = new MenuItem({ id: 'file', label: this.$t('msg.file.name'), submenu: fileMenu });
-    return fileMenuItem;
+    return new MenuItem({ id: 'file', label: this.$t('msg.file.name'), submenu: fileMenu });
   }
 
   private createPlaybackMenu() {
     const playbackMenu = this.convertFromMenuItemTemplate('playback');
-    const playbackMenuItem = new MenuItem({ id: 'playback', label: this.$t('msg.playback.name'), submenu: playbackMenu });
-    return playbackMenuItem;
+    return new MenuItem({ id: 'playback', label: this.$t('msg.playback.name'), submenu: playbackMenu });
   }
 
   private createAudioMenu() {
     const audioMenu = this.convertFromMenuItemTemplate('audio');
-    const audioMenuItem = new MenuItem({ id: 'audio', label: this.$t('msg.audio.name'), submenu: audioMenu });
-    return audioMenuItem;
+    return new MenuItem({ id: 'audio', label: this.$t('msg.audio.name'), submenu: audioMenu });
   }
 
   private createSubtitleMenu() {
     const subtitleMenu = this.convertFromMenuItemTemplate('subtitle');
-    const subtitleMenuItem = new MenuItem({ id: 'subtitle', label: this.$t('msg.subtitle.name'), submenu: subtitleMenu });
-    return subtitleMenuItem;
+    return new MenuItem({ id: 'subtitle', label: this.$t('msg.subtitle.name'), submenu: subtitleMenu });
   }
 
   private createEditMenu() {
     const editMenu = this.convertFromMenuItemTemplate('edit');
-    const editMenuItem = new MenuItem({ id: 'edit', label: this.$t('msg.edit.name'), submenu: editMenu });
-    return editMenuItem;
+    return new MenuItem({ id: 'edit', label: this.$t('msg.edit.name'), submenu: editMenu });
   }
 
   private createHistoryMenu() {
     const historyMenu = this.convertFromMenuItemTemplate('history');
-    const historyMenuItem = new MenuItem({ id: 'history', label: this.$t('msg.history.name'), submenu: historyMenu });
-    return historyMenuItem;
+    return new MenuItem({ id: 'history', label: this.$t('msg.history.name'), submenu: historyMenu });
   }
 
   private createFavouriteMenu() {
     const favouriteMenu = this.convertFromMenuItemTemplate('favourite');
-    const favouriteMenuItem = new MenuItem({ id: 'favourite', label: this.$t('msg.favourite.name'), submenu: favouriteMenu });
-    return favouriteMenuItem;
+    return new MenuItem({ id: 'favourite', label: this.$t('msg.favourite.name'), submenu: favouriteMenu });
   }
 
   private createBrowsingWindowMenu() {
     const window = this.convertFromMenuItemTemplate('browsing.window');
-    const windowMenuItem = new MenuItem({ id: 'browsing.window', label: this.$t('msg.window.name'), submenu: window });
-    return windowMenuItem;
+    return new MenuItem({ id: 'browsing.window', label: this.$t('msg.window.name'), submenu: window });
   }
 
   private createWindowMenu() {
     const windowMenu = this.convertFromMenuItemTemplate('window');
-    const windowMenuItem = new MenuItem({ id: 'window', label: this.$t('msg.window.name'), submenu: windowMenu });
-    return windowMenuItem;
+    return new MenuItem({ id: 'window', label: this.$t('msg.window.name'), submenu: windowMenu });
   }
 
   private createHelpMenu() {
@@ -943,7 +941,18 @@ export default class Menubar {
       return new MenuItem(options);
     }
     if (arg1.enabled === undefined) arg1.enabled = true;
-
+    let menuIcon: string | Electron.nativeImage = '';
+    switch (arg1.icon) {
+      case 'enter-pip':
+        menuIcon = systemPreferences.isDarkMode() ? nativeImage.createFromDataURL(require('../../../build/icons/mojave-pip.png')) : nativeImage.createFromDataURL(require('../../../build/icons/normal-pip.png'));
+        break;
+      case 'play-in-new-window':
+        menuIcon = systemPreferences.isDarkMode() ? nativeImage.createFromDataURL(require('../../../build/icons/mojave-window.png')) : nativeImage.createFromDataURL(require('../../../build/icons/normal-window.png'));
+        break;
+      default:
+        menuIcon = '';
+        break;
+    }
     const label = this.$t(arg1.label);
 
     const options: Electron.MenuItemConstructorOptions = {
@@ -957,6 +966,7 @@ export default class Menubar {
       },
       enabled: arg1.enabled,
       accelerator: arg1.accelerator,
+      icon: menuIcon,
     };
 
     if (arg1.id === 'file.open') {
@@ -981,7 +991,6 @@ export default class Menubar {
       options.type = 'checkbox';
       options.checked = arg1.checked;
     }
-
     return new MenuItem(options);
   }
 
diff --git a/src/main/menu/MenuService.ts b/src/main/menu/MenuService.ts
index 1bdf277ea3..4bea3e06bb 100644
--- a/src/main/menu/MenuService.ts
+++ b/src/main/menu/MenuService.ts
@@ -24,6 +24,10 @@ export default class MenuService {
     this.menu.updateFocusedWindow(isFocusedOnMain);
   }
 
+  public updatePipIcon(isDarkMode: boolean) {
+    this.menu.updatePipIcon(isDarkMode);
+  }
+
   private registeMenuActions() {
     ipcMain.on('popup-menu', () => {
       this.menu.popupMenu();
diff --git a/src/main/menu/common/Menubar.ts b/src/main/menu/common/Menubar.ts
index 06a143dcf0..5ac3de2b86 100644
--- a/src/main/menu/common/Menubar.ts
+++ b/src/main/menu/common/Menubar.ts
@@ -22,6 +22,7 @@ export interface IMenubarMenuItemAction {
   winAccelerator?: string,
   checked?: boolean; // Assumed false if missing
   enabled?: boolean; // Assumed true if missing
+  icon?: string,
 }
 
 export interface IMenubarMenuItemRole {
diff --git a/src/main/menu/menu.json b/src/main/menu/menu.json
index f6c99579c1..43aedf44a5 100644
--- a/src/main/menu/menu.json
+++ b/src/main/menu/menu.json
@@ -409,9 +409,17 @@
       {
         "id": "browsing.window.pip",
         "label": "msg.window.enterPip",
+        "icon": "enter-pip",
         "accelerator": "P",
         "enabled": false
       },
+      {
+        "id": "browsing.window.playInNewWindow",
+        "label": "msg.window.playInNewWindow",
+        "icon": "play-in-new-window",
+        "accelerator": "O",
+        "enabled": false
+      },
       {
         "id": "menubar.separator"
       },
diff --git a/src/renderer/assets/icon/reloadStop-default-icon.svg b/src/renderer/assets/icon/reloadStop-default-icon.svg
new file mode 100644
index 0000000000..dd7293377b
--- /dev/null
+++ b/src/renderer/assets/icon/reloadStop-default-icon.svg
@@ -0,0 +1,7 @@
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="menuBar/__icon/--stopRefresh" transform="translate(-8.000000, -8.000000)" fill="#000000">
+            <path d="M10.1209632,8.98959236 L14.9992778,13.8682778 L19.8790368,8.98959236 C20.1630545,8.70557469 20.6074957,8.67975491 20.9206813,8.912133 L21.0104076,8.98959236 C21.3228271,9.30201179 21.3228271,9.80854378 21.0104076,10.1209632 L21.0104076,10.1209632 L16.1312778,14.9992778 L21.0104076,19.8790368 C21.3228271,20.1914562 21.3228271,20.6979882 21.0104076,21.0104076 C20.6979882,21.3228271 20.1914562,21.3228271 19.8790368,21.0104076 L14.9992778,16.1312778 L10.1209632,21.0104076 C9.83694554,21.2944253 9.39250428,21.3202451 9.07931869,21.087867 L8.98959236,21.0104076 C8.67717293,20.6979882 8.67717293,20.1914562 8.98959236,19.8790368 L8.98959236,19.8790368 L13.8682778,14.9992778 L8.98959236,10.1209632 C8.67717293,9.80854378 8.67717293,9.30201179 8.98959236,8.98959236 C9.30201179,8.67717293 9.80854378,8.67717293 10.1209632,8.98959236 Z" id="icon"></path>
+        </g>
+    </g>
+</svg>
diff --git a/src/renderer/components/BaseIconContainer.vue b/src/renderer/components/BaseIconContainer.vue
index 13402869c0..d5e828fbd6 100644
--- a/src/renderer/components/BaseIconContainer.vue
+++ b/src/renderer/components/BaseIconContainer.vue
@@ -553,7 +553,7 @@ screen and (min-aspect-ratio: 1/1) and (min-height: 1080px) {
   width: 16px;
   height: 16px;
 }
-.back, .forward, .pageRefresh {
+.back, .forward, .pageRefresh, .reloadStop {
   width: 16px;
   height: 16px;
 }
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index ae9f05ced4..f25b0e2e11 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -10,8 +10,8 @@
       ref="browsingHeader"
       :show-sidebar="showSidebar"
       :title="title"
+      :is-reloading="isReloading"
       :handle-enter-pip="handleEnterPip"
-      :handle-global-pip="handleGlobalPip"
       :handle-url-reload="handleUrlReload"
       :handle-url-back="handleUrlBack"
       :handle-url-forward="handleUrlForward"
@@ -116,6 +116,7 @@ export default {
         /^https:\/\/auth.alipay.com\/login\//i,
         /^https:\/\/account.xiaomi.com\/pass\//i,
       ],
+      isReloading: false,
     };
   },
   computed: {
@@ -253,6 +254,32 @@ export default {
     loadingState(val: boolean) {
       if (val) {
         this.hasVideo = false;
+      } else {
+        setTimeout(() => {
+          const loadUrl = this.$electron.remote
+            .getCurrentWindow()
+            .getBrowserViews()[0]
+            .webContents.getURL();
+          const hostname = urlParseLax(loadUrl).hostname;
+          let channel = hostname.slice(
+            hostname.indexOf('.') + 1,
+            hostname.length,
+          );
+          if (loadUrl.includes('youtube')) {
+            channel = 'youtube.com';
+          }
+          this.$electron.remote
+            .getCurrentWindow()
+            .getBrowserViews()[0]
+            .webContents.executeJavaScript(
+              this.calculateVideoNum,
+              (r: number) => {
+                this.hasVideo = channel === 'youtube.com' && !getVideoId(loadUrl).id
+                  ? false
+                  : !!r;
+              },
+            );
+        }, 1000);
       }
     },
     headerToShow(val: boolean) {
@@ -305,7 +332,7 @@ export default {
     this.$bus.$on('toggle-reload', this.handleUrlReload);
     this.$bus.$on('toggle-back', this.handleUrlBack);
     this.$bus.$on('toggle-forward', this.handleUrlForward);
-    this.$bus.$on('toggle-pip', () => {
+    this.$bus.$on('toggle-pip', (isGlobal: boolean) => {
       const focusedOnMainWindow = this.$electron.remote.getCurrentWindow().isVisible()
         && this.$electron.remote.getCurrentWindow().isFocused();
       setTimeout(() => {
@@ -313,7 +340,7 @@ export default {
           if (!focusedOnMainWindow || this.isGlobal) {
             this.handleExitPip();
           } else {
-            this.handleEnterPip();
+            this.handleEnterPip(isGlobal);
           }
         } else {
           this.acceleratorAvailable = true;
@@ -379,17 +406,20 @@ export default {
         if (loadUrl.includes('youtube')) {
           channel = 'youtube.com';
         }
-        this.$electron.remote
-          .getCurrentWindow()
-          .getBrowserViews()[0]
-          .webContents.executeJavaScript(
-            this.calculateVideoNum,
-            (r: number) => {
-              this.hasVideo = channel === 'youtube.com' && !getVideoId(loadUrl).id
-                ? false
-                : !!r;
-            },
-          );
+        if (!this.$electron.remote.getCurrentWindow()
+          .getBrowserViews()[0].webContents.isLoading()) {
+          this.$electron.remote
+            .getCurrentWindow()
+            .getBrowserViews()[0]
+            .webContents.executeJavaScript(
+              this.calculateVideoNum,
+              (r: number) => {
+                this.hasVideo = channel === 'youtube.com' && !getVideoId(loadUrl).id
+                  ? false
+                  : !!r;
+              },
+            );
+        }
         this.$bus.$emit('update-web-info', {
           canGoBack: state.canGoBack,
           canGoForward: state.canGoForward,
@@ -424,10 +454,6 @@ export default {
       updateBarrageOpen: browsingActions.UPDATE_BARRAGE_OPEN,
       updateIsPip: browsingActions.UPDATE_IS_PIP,
     }),
-    handleGlobalPip() {
-      this.isGlobal = true;
-      this.handleEnterPip();
-    },
     handlePageTitle(e: Event, title: string) {
       this.title = title;
     },
@@ -504,6 +530,10 @@ export default {
           'browsing.window.pip',
           available,
         );
+        this.menuService.updateMenuItemEnabled(
+          'browsing.window.playInNewWindow',
+          available,
+        );
       }
     },
     updateCanGoBack(val: boolean) {
@@ -595,7 +625,6 @@ export default {
     },
     willNavigate(e: Event, url: string) {
       if (!this.startLoading) {
-        this.startLoading = true;
         if (
           !url
           || url === 'about:blank'
@@ -609,7 +638,6 @@ export default {
     },
     didStartLoading() {
       if (!this.startLoading) {
-        this.startLoading = true;
         const url = this.$electron.remote
           .getCurrentWindow()
           .getBrowserView()
@@ -668,14 +696,8 @@ export default {
         .webContents.focus();
     },
     didStopLoading() {
-      const loadingTime: number = new Date().getTime() - this.startTime;
-      if (loadingTime % 3000 === 0) {
-        this.loadingState = false;
-      } else {
-        setTimeout(() => {
-          this.loadingState = false;
-        }, 3000 - (loadingTime % 3000));
-      }
+      this.isReloading = false;
+      this.loadingState = false;
     },
     handleOpenUrl({ url }: { url: string }) {
       this.startLoading = true;
@@ -820,16 +842,14 @@ export default {
       }
     },
     handleUrlReload() {
-      if (this.isPip) {
-        this.$electron.remote
-          .getCurrentWindow()
-          .getBrowserViews()[0]
-          .webContents.reload();
+      if (!this.isReloading) {
+        this.isReloading = true;
+        this.$electron.remote.getCurrentWindow()
+          .getBrowserViews()[0].webContents.reload();
       } else {
-        this.$electron.remote
-          .getCurrentWindow()
-          .getBrowserViews()[0]
-          .webContents.reload();
+        this.isReloading = false;
+        this.$electron.remote.getCurrentWindow()
+          .getBrowserViews()[0].webContents.stop();
       }
     },
     enterPipOperation() {
@@ -853,8 +873,9 @@ export default {
         this.othersRecover();
       }
     },
-    handleEnterPip() {
+    handleEnterPip(isGlobal: boolean) {
       if (this.hasVideo) {
+        this.isGlobal = isGlobal;
         this.removeListener();
         this.hasVideo = false;
         this.adaptFinished = false;
diff --git a/src/renderer/components/BrowsingView/BrowsingHeader.vue b/src/renderer/components/BrowsingView/BrowsingHeader.vue
index 5019d0f4c0..7546decbdc 100644
--- a/src/renderer/components/BrowsingView/BrowsingHeader.vue
+++ b/src/renderer/components/BrowsingView/BrowsingHeader.vue
@@ -12,13 +12,13 @@
     <browsing-input
       :handle-url-reload="handleUrlReload"
       :title="title"
+      :is-reloading="isReloading"
       :close-url-input="closeUrlInput"
       :play-file-with-playing-view="playFileWithPlayingView"
     />
     <browsing-pip-control
       :has-video="hasVideo"
       :handle-enter-pip="handleEnterPip"
-      :handle-global-pip="handleGlobalPip"
     />
   </div>
 </template>
@@ -45,6 +45,10 @@ export default {
       type: String,
       default: 'Splayer',
     },
+    isReloading: {
+      type: Boolean,
+      required: true,
+    },
     handleEnterPip: {
       type: Function,
       required: true,
@@ -64,12 +68,7 @@ export default {
     handleBookmarkOpen: {
       type: Function,
       required: true,
-    },
-    handleGlobalPip: {
-      type: Function,
-      required: true,
-    },
-  },
+    },},
   data() {
     return {
       showOpenUrl: false,
diff --git a/src/renderer/components/BrowsingView/BrowsingInput.vue b/src/renderer/components/BrowsingView/BrowsingInput.vue
index c63bf16f7a..3313d641c4 100644
--- a/src/renderer/components/BrowsingView/BrowsingInput.vue
+++ b/src/renderer/components/BrowsingView/BrowsingInput.vue
@@ -13,7 +13,7 @@
       class="control-button page-refresh-icon no-drag"
     >
       <Icon
-        type="pageRefresh"
+        :type="isReloading ? 'reloadStop' : 'pageRefresh'"
       />
     </div>
   </div>
@@ -32,6 +32,10 @@ export default {
       type: String,
       default: 'Splayer',
     },
+    isReloading: {
+      type: Boolean,
+      required: true,
+    },
     handleUrlReload: {
       type: Function,
       required: true,
diff --git a/src/renderer/components/BrowsingView/BrowsingPipControl.vue b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
index 177fff3e87..a3ce4fb9c2 100644
--- a/src/renderer/components/BrowsingView/BrowsingPipControl.vue
+++ b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
@@ -38,10 +38,6 @@ export default {
       type: Function,
       required: true,
     },
-    handleGlobalPip: {
-      type: Function,
-      required: true,
-    },
     hasVideo: {
       type: Boolean,
       default: false,
@@ -55,13 +51,13 @@ export default {
   computed: {
     pipType() {
       if (!this.hasVideo) return 'pipDisabled';
-      else if (this.pip === 'Enter') return 'pip';
+      if (this.pip === 'Enter') return 'pip';
       return 'pop';
     },
   },
   methods: {
     handlePip() {
-      this.pip === 'Enter' ? this.handleEnterPip() : this.handleGlobalPip();
+      this.pip === 'Enter' ? this.handleEnterPip(true) : this.handleEnterPip(false);
     },
     switchPipType() {
       this.pip = this.pip === 'Enter' ? 'Global' : 'Enter';
diff --git a/src/renderer/locales/lang/en.json b/src/renderer/locales/lang/en.json
index b9edd65b71..1bbea43d4f 100644
--- a/src/renderer/locales/lang/en.json
+++ b/src/renderer/locales/lang/en.json
@@ -198,7 +198,9 @@
       "name": "Window",
       "originSize": "100%",
       "enterPip": "Enter Picture In Picture",
-      "exitPip": "Exit Picture In Picture"
+      "exitPip": "Exit Picture In Picture",
+      "playInNewWindow": "Play In New Window",
+      "backToBrowser": "Back To Browser"
     },
     "favourite": {
       "name": "Channel",
diff --git a/src/renderer/main.ts b/src/renderer/main.ts
index ab8daff2bb..0a7967a5f5 100644
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@@ -959,7 +959,10 @@ new Vue({
         this.browsingViewTop = !this.browsingViewTop;
       });
       this.menuService.on('browsing.window.pip', () => {
-        this.$bus.$emit('toggle-pip');
+        this.$bus.$emit('toggle-pip', true);
+      });
+      this.menuService.on('browsing.window.playInNewWindow', () => {
+        this.$bus.$emit('toggle-pip', false);
       });
       this.menuService.on('browsing.window.maxmize', () => {
         const browserWindow = this.$electron.remote.getCurrentWindow();

From 7939ac559564c29c356b1ca295823bc5cc7ed4a1 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 15:39:54 +0800
Subject: [PATCH 089/123] feat(browsing): adjust ui

---
 src/renderer/assets/icon/back-default-icon.svg |  2 +-
 src/renderer/assets/icon/down-default-icon.svg |  2 +-
 .../assets/icon/forward-default-icon.svg       |  2 +-
 .../assets/icon/pageRefresh-hover-icon.svg     |  2 +-
 .../assets/icon/pipDisabled-default-icon.svg   |  4 ++--
 src/renderer/assets/icon/pop-default-icon.svg  |  2 +-
 .../assets/icon/sidebar-default-icon.svg       |  2 +-
 src/renderer/components/BaseIconContainer.vue  |  8 ++++----
 .../BrowsingView/BrowsingControl.vue           |  2 +-
 .../components/BrowsingView/BrowsingInput.vue  |  2 +-
 .../BrowsingView/BrowsingPipControl.vue        | 18 ++++++++++++++----
 11 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/renderer/assets/icon/back-default-icon.svg b/src/renderer/assets/icon/back-default-icon.svg
index 2611f227d6..fc3d80e59a 100644
--- a/src/renderer/assets/icon/back-default-icon.svg
+++ b/src/renderer/assets/icon/back-default-icon.svg
@@ -4,6 +4,6 @@
     <title>icon--backward</title>
     <desc>Created with Sketch.</desc>
     <g id="2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M13.7804038,7.0344359 L8.06578833,12.7774637 C7.77152389,13.0731912 7.29775814,13.0746698 7.00202238,12.7789423 C6.70922927,12.4846935 6.71070059,12.0041363 7.00202238,11.7113661 L11.4277596,7.25623151 L0.750374326,7.25623151 C0.336932792,7.25623151 0,6.92058081 0,6.49916915 C0,6.08071476 0.341346754,5.74210678 0.750374326,5.74210678 C2.06558675,5.74210678 3.05199607,5.74210678 3.70960228,5.74210678 C5.42474834,5.74210678 7.99746744,5.74210678 11.4277596,5.74210678 L6.99466576,1.28697219 C6.70187265,0.992723348 6.70040132,0.516602086 6.99760841,0.219395966 C7.29334417,-0.0748528778 7.77446653,-0.0718956012 8.064317,0.220874611 L13.7804038,5.96538103 C14.0746682,6.25962987 14.0717256,6.74166567 13.7804038,7.0344359 Z" id="icon--backward" fill="#6E7085" fill-rule="nonzero" transform="translate(7.000000, 6.500000) scale(-1, 1) translate(-7.000000, -6.500000) "></path>
+        <path d="M13.7804038,7.0344359 L8.06578833,12.7774637 C7.77152389,13.0731912 7.29775814,13.0746698 7.00202238,12.7789423 C6.70922927,12.4846935 6.71070059,12.0041363 7.00202238,11.7113661 L11.4277596,7.25623151 L0.750374326,7.25623151 C0.336932792,7.25623151 0,6.92058081 0,6.49916915 C0,6.08071476 0.341346754,5.74210678 0.750374326,5.74210678 C2.06558675,5.74210678 3.05199607,5.74210678 3.70960228,5.74210678 C5.42474834,5.74210678 7.99746744,5.74210678 11.4277596,5.74210678 L6.99466576,1.28697219 C6.70187265,0.992723348 6.70040132,0.516602086 6.99760841,0.219395966 C7.29334417,-0.0748528778 7.77446653,-0.0718956012 8.064317,0.220874611 L13.7804038,5.96538103 C14.0746682,6.25962987 14.0717256,6.74166567 13.7804038,7.0344359 Z" id="icon--backward" fill="#000" fill-rule="nonzero" transform="translate(7.000000, 6.500000) scale(-1, 1) translate(-7.000000, -6.500000) "></path>
     </g>
 </svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/down-default-icon.svg b/src/renderer/assets/icon/down-default-icon.svg
index 8f01457df6..446ca80bf1 100644
--- a/src/renderer/assets/icon/down-default-icon.svg
+++ b/src/renderer/assets/icon/down-default-icon.svg
@@ -1,7 +1,7 @@
 
 <svg width="5px" height="7px" viewBox="0 0 5 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="菜单" transform="translate(-704.000000, -15.000000)" fill="#B8BACC" stroke="#B8BACC" stroke-width="0.9">
+        <g id="菜单" transform="translate(-704.000000, -15.000000)" fill="#6E7085" stroke="#6E7085" stroke-width="0.9">
             <g id="编组" transform="translate(702.000000, 8.000000)">
                 <polygon id="路径备份" transform="translate(4.500000, 10.000000) scale(-1, 1) translate(-4.500000, -10.000000) " points="6 7 3 10.2537709 6 13"></polygon>
             </g>
diff --git a/src/renderer/assets/icon/forward-default-icon.svg b/src/renderer/assets/icon/forward-default-icon.svg
index 4fe2a78765..76bcc69584 100644
--- a/src/renderer/assets/icon/forward-default-icon.svg
+++ b/src/renderer/assets/icon/forward-default-icon.svg
@@ -1,6 +1,6 @@
 <svg width="14px" height="13px" viewBox="0 0 14 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="收起侧边栏" transform="translate(-206.000000, -359.000000)" fill="#6E7085" fill-rule="nonzero">
+        <g id="收起侧边栏" transform="translate(-206.000000, -359.000000)" fill="#000" fill-rule="nonzero">
             <g id="可点状态颜色" transform="translate(213.000000, 365.500000) scale(-1, -1) translate(-213.000000, -365.500000) translate(206.000000, 359.000000)">
                 <path d="M13.7804038,7.0344359 L8.06578832,12.7774637 C7.77152388,13.0731912 7.29775813,13.0746698 7.00202237,12.7789423 C6.70922926,12.4846935 6.71070058,12.0041363 7.00202237,11.7113661 L11.4277596,7.25623151 L0.750374315,7.25623151 C0.336932781,7.25623151 -1.12367911e-08,6.92058081 -1.12367911e-08,6.49916915 C-1.12367911e-08,6.08071476 0.341346743,5.74210678 0.750374315,5.74210678 C2.06558674,5.74210678 3.05199606,5.74210678 3.70960227,5.74210678 C5.42474833,5.74210678 7.99746743,5.74210678 11.4277596,5.74210678 L6.99466575,1.28697219 C6.70187264,0.992723348 6.70040131,0.516602086 6.9976084,0.219395966 C7.29334416,-0.0748528778 7.77446652,-0.0718956012 8.06431699,0.220874611 L13.7804038,5.96538103 C14.0746682,6.25962987 14.0717256,6.74166567 13.7804038,7.0344359 Z" id="icon--backward" transform="translate(7.000000, 6.500000) scale(-1, 1) translate(-7.000000, -6.500000) "></path>
             </g>
diff --git a/src/renderer/assets/icon/pageRefresh-hover-icon.svg b/src/renderer/assets/icon/pageRefresh-hover-icon.svg
index 61536e5b4f..ae72cf1721 100644
--- a/src/renderer/assets/icon/pageRefresh-hover-icon.svg
+++ b/src/renderer/assets/icon/pageRefresh-hover-icon.svg
@@ -1,6 +1,6 @@
 <svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="各类图标的鼠标悬浮状态" transform="translate(-627.000000, -13.000000)" fill="#B8BACC" fill-rule="nonzero">
+        <g id="各类图标的鼠标悬浮状态" transform="translate(-627.000000, -13.000000)" fill="#000" fill-rule="nonzero">
             <g id="browserArea" transform="translate(76.000000, 0.000000)">
                 <g id="menuBar">
                     <g id="urlBar" transform="translate(114.000000, 0.000000)">
diff --git a/src/renderer/assets/icon/pipDisabled-default-icon.svg b/src/renderer/assets/icon/pipDisabled-default-icon.svg
index 7d51db9103..565e8bfa3d 100644
--- a/src/renderer/assets/icon/pipDisabled-default-icon.svg
+++ b/src/renderer/assets/icon/pipDisabled-default-icon.svg
@@ -2,8 +2,8 @@
 <svg width="30px" height="23px" viewBox="0 0 30 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
     <desc>Created with Sketch.</desc>
-    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="1">
-        <g id="browseing" transform="translate(-431.000000, -324.000000)" fill="#6E7085">
+    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.6">
+        <g id="browseing" transform="translate(-431.000000, -324.000000)" fill="#000">
             <g id="control-bar" transform="translate(238.000000, 300.000000)">
                 <g id="icon-pictureInPicture" transform="translate(192.000000, 19.000000)">
                     <path d="M3.43,5 L28.57,5 C29.9120519,5 31,6.08794806 31,7.43 L31,25.07 C31,26.4120519 29.9120519,27.5 28.57,27.5 L3.43,27.5 C2.08794806,27.5 1,26.4120519 1,25.07 L1,7.43 C1,6.08794806 2.08794806,5 3.43,5 Z M3.5,8.3 L3.5,24.2 C3.5,24.6418278 3.8581722,25 4.3,25 L27.7,25 C28.1418278,25 28.5,24.6418278 28.5,24.2 L28.5,8.3 C28.5,7.8581722 28.1418278,7.5 27.7,7.5 L4.3,7.5 C3.8581722,7.5 3.5,7.8581722 3.5,8.3 Z M14.6696026,14.5395022 L25.4438391,14.5395022 C25.8911898,14.5395022 26.2538391,14.9021515 26.2538391,15.3495022 L26.2538391,21.7295022 C26.2538391,22.1768528 25.8911898,22.5395022 25.4438391,22.5395022 L14.6696026,22.5395022 C14.222252,22.5395022 13.8596026,22.1768528 13.8596026,21.7295022 L13.8596026,15.3495022 C13.8596026,14.9021515 14.222252,14.5395022 14.6696026,14.5395022 Z" id="pictureInPicture"></path>
diff --git a/src/renderer/assets/icon/pop-default-icon.svg b/src/renderer/assets/icon/pop-default-icon.svg
index 93ea84e0f1..dcdba07654 100644
--- a/src/renderer/assets/icon/pop-default-icon.svg
+++ b/src/renderer/assets/icon/pop-default-icon.svg
@@ -1,7 +1,7 @@
 
 <svg width="19px" height="15px" viewBox="0 0 19 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="menuBar/__icon/--pictureOutPicture" transform="translate(-6.000000, -8.000000)" fill="#B8BACC" fill-rule="nonzero">
+        <g id="menuBar/__icon/--pictureOutPicture" transform="translate(-6.000000, -8.000000)" fill="#000" fill-opacity="0.7" fill-rule="nonzero">
             <path d="M21.542,8.75 C22.3472312,8.75 23,9.40276883 23,10.208 L23,15.5 L24.389,15.5 C24.6574104,15.5 24.875,15.7175896 24.875,15.986 L24.875,21.764 C24.875,22.0324104 24.6574104,22.25 24.389,22.25 L15.111,22.25 C14.8425896,22.25 14.625,22.0324104 14.625,21.764 L14.625,20.75 L7.458,20.75 C6.65276883,20.75 6,20.0972312 6,19.292 L6,10.208 C6,9.40276883 6.65276883,8.75 7.458,8.75 L21.542,8.75 Z M21.02,10.25 L7.98,10.25 C7.71490332,10.25 7.5,10.4649033 7.5,10.73 L7.5,18.77 C7.5,19.0350967 7.71490332,19.25 7.98,19.25 L14.625,19.25 L14.625,15.986 C14.625,15.7175896 14.8425896,15.5 15.111,15.5 L21.5,15.5 L21.5,10.73 C21.5,10.4649033 21.2850967,10.25 21.02,10.25 Z" id="icon--pictureOutPicture"></path>
         </g>
     </g>
diff --git a/src/renderer/assets/icon/sidebar-default-icon.svg b/src/renderer/assets/icon/sidebar-default-icon.svg
index df6b4868d9..a7afc69f9b 100644
--- a/src/renderer/assets/icon/sidebar-default-icon.svg
+++ b/src/renderer/assets/icon/sidebar-default-icon.svg
@@ -1,6 +1,6 @@
 <svg width="14px" height="12px" viewBox="0 0 14 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="收起侧边栏" transform="translate(-261.000000, -290.000000)" fill="#6E7085" fill-rule="nonzero">
+        <g id="收起侧边栏" transform="translate(-261.000000, -290.000000)" fill-opacity="0.6" fill="#000" fill-rule="nonzero">
             <g id="sidebar-default-icon" transform="translate(261.000000, 290.000000)">
                 <path d="M13.1966203,10.15 C13.6384481,10.15 13.9966203,10.5081722 13.9966203,10.95 C13.9966203,11.3918278 13.6384481,11.75 13.1966203,11.75 L0.803379678,11.75 C0.361551878,11.75 0.00337967812,11.3918278 0.00337967812,10.95 C0.00337967812,10.5081722 0.361551878,10.15 0.803379678,10.15 L13.1966203,10.15 Z M13.1966203,5.2 C13.6384481,5.2 13.9966203,5.5581722 13.9966203,6 C13.9966203,6.4418278 13.6384481,6.8 13.1966203,6.8 L0.803379678,6.8 C0.361551878,6.8 0.00337967812,6.4418278 0.00337967812,6 C0.00337967812,5.5581722 0.361551878,5.2 0.803379678,5.2 L13.1966203,5.2 Z M13.1966203,0.25 C13.6384481,0.25 13.9966203,0.6081722 13.9966203,1.05 C13.9966203,1.4918278 13.6384481,1.85 13.1966203,1.85 L0.803379678,1.85 C0.361551878,1.85 0.00337967812,1.4918278 0.00337967812,1.05 C0.00337967812,0.6081722 0.361551878,0.25 0.803379678,0.25 L13.1966203,0.25 Z" id="形状"></path>
             </g>
diff --git a/src/renderer/components/BaseIconContainer.vue b/src/renderer/components/BaseIconContainer.vue
index 13402869c0..5780a54905 100644
--- a/src/renderer/components/BaseIconContainer.vue
+++ b/src/renderer/components/BaseIconContainer.vue
@@ -66,8 +66,8 @@ export default {
   margin: auto;
 }
 .sidebar {
-  width: 14px;
-  height: 12px;
+  width: 16px;
+  height: 16px;
 }
 .hoverState {
   display: flex;
@@ -631,8 +631,8 @@ screen and (min-aspect-ratio: 1/1) and (min-height: 1080px) {
   height: 20px;
 }
 .pip, .pop, .pipDisabled {
-  width: 18px;
-  height: 14px;
+  width: 20px;
+  height: 20px;
 }
 .pipRecord, .pipBack {
   width: 20px;
diff --git a/src/renderer/components/BrowsingView/BrowsingControl.vue b/src/renderer/components/BrowsingView/BrowsingControl.vue
index 9fabc6fb97..063465c770 100644
--- a/src/renderer/components/BrowsingView/BrowsingControl.vue
+++ b/src/renderer/components/BrowsingView/BrowsingControl.vue
@@ -96,7 +96,7 @@ export default {
     transition: background-color 100ms ease-in;
   }
   .button-hover:hover {
-    background-color: #F5F6F8;
+    background-color: #ECEEF0;
   }
   .sidebar-icon {
     margin-left: 8px;
diff --git a/src/renderer/components/BrowsingView/BrowsingInput.vue b/src/renderer/components/BrowsingView/BrowsingInput.vue
index c63bf16f7a..d999bca986 100644
--- a/src/renderer/components/BrowsingView/BrowsingInput.vue
+++ b/src/renderer/components/BrowsingView/BrowsingInput.vue
@@ -109,7 +109,7 @@ export default {
     align-items: center;
     transition: background-color 100ms ease-in;
     &:hover {
-      background-color: #F5F6F8;
+      background-color: #ECEEF0;
     }
   }
   .page-refresh-icon {
diff --git a/src/renderer/components/BrowsingView/BrowsingPipControl.vue b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
index 7896f19ee5..f8b1f41ef5 100644
--- a/src/renderer/components/BrowsingView/BrowsingPipControl.vue
+++ b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
@@ -7,7 +7,7 @@
       :style="{
         opacity: hasVideo ? 1.0 : 0.3,
       }"
-      :class="hasVideo ? 'button-hover': ''"
+      :class="hasVideo ? 'button-hover' : ''"
       class="pip-icon no-drag"
     >
       <Icon
@@ -19,8 +19,8 @@
       @mouseover="mouseover = true"
       @mouseout="mouseover = false"
       :style="{
-        opacity: mouseover ? 1.0 : 0.3,
       }"
+      :class="switchPip ? 'translate' : ''"
       class="down-icon"
     >
       <Icon
@@ -54,6 +54,7 @@ export default {
   data() {
     return {
       pip: 'Enter',
+      switchPip: false,
     };
   },
   computed: {
@@ -67,6 +68,7 @@ export default {
     },
     switchPipType() {
       this.pip = this.pip === 'Enter' ? 'Global' : 'Enter';
+      this.switchPip = true;
     },
   },
 };
@@ -78,6 +80,7 @@ export default {
   display: flex;
   width: 62px;
   height: 100%;
+  justify-content: flex-start;
   align-items: center;
   border-left: 1px solid #F2F1F4;
   .pip-icon {
@@ -91,17 +94,24 @@ export default {
     transition: background-color 100ms ease-in, opacity 100ms ease-in;
   }
   .button-hover:hover {
-    background-color: #F5F6F8;
+    background-color: #ECEEF0;
   }
   .down-icon {
-    width: 23px;
+    width: 8px;
     height: 20px;
+    margin-left: 2px;
+    margin-right: 3px;
     display: flex;
     justify-content: flex-start;
     align-items: center;
+    opacity: 0.3;
+    transition: opacity 50ms linear;
     .icon {
       margin-top: 1px;
     }
+    &:hover {
+      opacity: 1.0;
+    }
   }
   @keyframes translate {
     0% {

From f6e4d43d93d849fe31671bf8bc9844c49f628d2d Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 15:41:29 +0800
Subject: [PATCH 090/123] feat(browsing): pop opacity

---
 src/renderer/assets/icon/pop-default-icon.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/assets/icon/pop-default-icon.svg b/src/renderer/assets/icon/pop-default-icon.svg
index dcdba07654..79c7fc4b96 100644
--- a/src/renderer/assets/icon/pop-default-icon.svg
+++ b/src/renderer/assets/icon/pop-default-icon.svg
@@ -1,7 +1,7 @@
 
 <svg width="19px" height="15px" viewBox="0 0 19 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="menuBar/__icon/--pictureOutPicture" transform="translate(-6.000000, -8.000000)" fill="#000" fill-opacity="0.7" fill-rule="nonzero">
+        <g id="menuBar/__icon/--pictureOutPicture" transform="translate(-6.000000, -8.000000)" fill="#000" fill-opacity="0.6" fill-rule="nonzero">
             <path d="M21.542,8.75 C22.3472312,8.75 23,9.40276883 23,10.208 L23,15.5 L24.389,15.5 C24.6574104,15.5 24.875,15.7175896 24.875,15.986 L24.875,21.764 C24.875,22.0324104 24.6574104,22.25 24.389,22.25 L15.111,22.25 C14.8425896,22.25 14.625,22.0324104 14.625,21.764 L14.625,20.75 L7.458,20.75 C6.65276883,20.75 6,20.0972312 6,19.292 L6,10.208 C6,9.40276883 6.65276883,8.75 7.458,8.75 L21.542,8.75 Z M21.02,10.25 L7.98,10.25 C7.71490332,10.25 7.5,10.4649033 7.5,10.73 L7.5,18.77 C7.5,19.0350967 7.71490332,19.25 7.98,19.25 L14.625,19.25 L14.625,15.986 C14.625,15.7175896 14.8425896,15.5 15.111,15.5 L21.5,15.5 L21.5,10.73 C21.5,10.4649033 21.2850967,10.25 21.02,10.25 Z" id="icon--pictureOutPicture"></path>
         </g>
     </g>

From 75e0546f347850ed1b6200472ed1c3c86512859a Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 15:53:59 +0800
Subject: [PATCH 091/123] fix(sidebaricon): iqiyi eslint warning

---
 .../LandingView/iQiyiSidebarIcon.vue          | 111 +++++++++---------
 1 file changed, 56 insertions(+), 55 deletions(-)

diff --git a/src/renderer/components/LandingView/iQiyiSidebarIcon.vue b/src/renderer/components/LandingView/iQiyiSidebarIcon.vue
index 03d54e1949..efb323f0df 100644
--- a/src/renderer/components/LandingView/iQiyiSidebarIcon.vue
+++ b/src/renderer/components/LandingView/iQiyiSidebarIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <div 
+  <div
     @mouseover="mouseover = true"
     @mouseout="mouseover = false"
     @mouseup="mouseupOnIcon(url)"
@@ -7,80 +7,81 @@
       opacity: mouseover || selected ? '1.0' : '0.7',
     }"
   >
-  <svg
-    width="42px"
-    height="42px"
-    viewBox="0 0 42 42"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-  >
-    <defs>
-      <circle
-        id="path-1"
-        cx="20"
-        cy="20"
-        r="20"
-      />
-    </defs>
-    <g
-      id="页面-1"
-      stroke="none"
-      stroke-width="1"
-      fill="none"
-      fill-rule="evenodd"
+    <svg
+      width="42px"
+      height="42px"
+      viewBox="0 0 42 42"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
     >
+      <defs>
+        <circle
+          id="path-1"
+          cx="20"
+          cy="20"
+          r="20"
+        />
+      </defs>
       <g
-        id="2"
-        transform="translate(-17.000000, -101.000000)"
+        id="页面-1"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd"
       >
         <g
-          id="sideBarItems"
-          transform="translate(18.000000, 46.000000)"
+          id="2"
+          transform="translate(-17.000000, -101.000000)"
         >
           <g
-            id="sideBarItem--iqiyi"
-            class="sidebar"
-            transform="translate(0.000000, 56.000000)"
+            id="sideBarItems"
+            transform="translate(18.000000, 46.000000)"
           >
-            <mask
-              id="mask-2"
-              fill="white"
-            >
-              <use xlink:href="#path-1" />
-            </mask>
-            <circle
-              stroke="#EBECF0"
-              fill="#42BD56"
-              :stroke-width="selected ? 2 : 0"
-              cx="20"
-              cy="20"
-              r="20"
-            />
             <g
-              id="logo--iqiyi"
-              stroke-width="1"
-              fill-rule="evenodd"
-              mask="url(#mask-2)"
-              fill="#FFFFFF"
+              id="sideBarItem--iqiyi"
+              class="sidebar"
+              transform="translate(0.000000, 56.000000)"
             >
+              <mask
+                id="mask-2"
+                fill="white"
+              >
+                <use xlink:href="#path-1" />
+              </mask>
+              <circle
+                :stroke-width="selected ? 2 : 0"
+                stroke="#EBECF0"
+                fill="#42BD56"
+                cx="20"
+                cy="20"
+                r="20"
+              />
               <g
-                id="形状"
-                transform="translate(8.177778, 9.777778)"
-                fill-rule="nonzero"
+                id="logo--iqiyi"
+                stroke-width="1"
+                fill-rule="evenodd"
+                mask="url(#mask-2)"
+                fill="#FFFFFF"
               >
-                <path :d="d1" />
+                <g
+                  id="形状"
+                  transform="translate(8.177778, 9.777778)"
+                  fill-rule="nonzero"
+                >
+                  <path :d="d1" />
+                </g>
               </g>
             </g>
           </g>
         </g>
       </g>
-    </g>
-  </svg>
+    </svg>
   </div>
 </template>
 <script lang="ts">
 import { log } from '@/libs/Log';
+
 export default {
   props: {
     selected: {

From 0b1845fb56e68dfe101649515d6d53f2afec7185 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Fri, 6 Sep 2019 16:01:03 +0800
Subject: [PATCH 092/123] feat(browsingview): refresh menu when change dark
 mode

---
 src/main/index.js                                          | 2 +-
 src/main/menu/Menu.ts                                      | 5 ++---
 src/main/menu/MenuService.ts                               | 4 ++--
 src/renderer/assets/icon/reloadStop-default-icon.svg       | 2 +-
 .../components/LandingView/BilibiliSidebarIcon.vue         | 7 ++++---
 src/renderer/components/LandingView/YoutubeSidebarIcon.vue | 7 ++++---
 src/renderer/components/LandingView/iQiyiSidebarIcon.vue   | 4 ++--
 7 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index 1d2798e86d..a2d42668ed 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -1161,7 +1161,7 @@ if (process.platform === 'darwin') {
 app.on('ready', () => {
   systemPreferences.subscribeNotification('AppleInterfaceThemeChangedNotification', () => {
     if (routeName === 'browsing-view') {
-      menuService.updatePipIcon(systemPreferences.isDarkMode());
+      menuService.updatePipIcon();
     }
   });
   menuService = new MenuService();
diff --git a/src/main/menu/Menu.ts b/src/main/menu/Menu.ts
index f9b366088e..1679f7c9d6 100644
--- a/src/main/menu/Menu.ts
+++ b/src/main/menu/Menu.ts
@@ -224,9 +224,8 @@ export default class Menubar {
     }
   }
 
-  public updatePipIcon(isDarkMode: boolean) {
-    this.menubar.getMenuItemById('browsing.window.pip').icon = isDarkMode ? nativeImage.createFromDataURL(require('../../../build/icons/mojave-pip.png')) : nativeImage.createFromDataURL(require('../../../build/icons/mojave-window.png'));
-    this.menubar.getMenuItemById('browsing.window.playInNewWindow').icon = isDarkMode ? nativeImage.createFromDataURL(require('../../../build/icons/mojave-window.png')) : nativeImage.createFromDataURL(require('../../../build/icons/normal-window.png'));
+  public updatePipIcon() {
+    this.refreshMenu('browsing.window');
   }
 
   public updateMenuItemEnabled(id: string, enabled: boolean) {
diff --git a/src/main/menu/MenuService.ts b/src/main/menu/MenuService.ts
index 4bea3e06bb..2dea5afe9c 100644
--- a/src/main/menu/MenuService.ts
+++ b/src/main/menu/MenuService.ts
@@ -24,8 +24,8 @@ export default class MenuService {
     this.menu.updateFocusedWindow(isFocusedOnMain);
   }
 
-  public updatePipIcon(isDarkMode: boolean) {
-    this.menu.updatePipIcon(isDarkMode);
+  public updatePipIcon() {
+    this.menu.updatePipIcon();
   }
 
   private registeMenuActions() {
diff --git a/src/renderer/assets/icon/reloadStop-default-icon.svg b/src/renderer/assets/icon/reloadStop-default-icon.svg
index dd7293377b..fa983a31b2 100644
--- a/src/renderer/assets/icon/reloadStop-default-icon.svg
+++ b/src/renderer/assets/icon/reloadStop-default-icon.svg
@@ -1,6 +1,6 @@
 <svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="menuBar/__icon/--stopRefresh" transform="translate(-8.000000, -8.000000)" fill="#000000">
+        <g id="menuBar/__icon/--stopRefresh" transform="translate(-8.000000, -8.000000)" fill="#6E7085">
             <path d="M10.1209632,8.98959236 L14.9992778,13.8682778 L19.8790368,8.98959236 C20.1630545,8.70557469 20.6074957,8.67975491 20.9206813,8.912133 L21.0104076,8.98959236 C21.3228271,9.30201179 21.3228271,9.80854378 21.0104076,10.1209632 L21.0104076,10.1209632 L16.1312778,14.9992778 L21.0104076,19.8790368 C21.3228271,20.1914562 21.3228271,20.6979882 21.0104076,21.0104076 C20.6979882,21.3228271 20.1914562,21.3228271 19.8790368,21.0104076 L14.9992778,16.1312778 L10.1209632,21.0104076 C9.83694554,21.2944253 9.39250428,21.3202451 9.07931869,21.087867 L8.98959236,21.0104076 C8.67717293,20.6979882 8.67717293,20.1914562 8.98959236,19.8790368 L8.98959236,19.8790368 L13.8682778,14.9992778 L8.98959236,10.1209632 C8.67717293,9.80854378 8.67717293,9.30201179 8.98959236,8.98959236 C9.30201179,8.67717293 9.80854378,8.67717293 10.1209632,8.98959236 Z" id="icon"></path>
         </g>
     </g>
diff --git a/src/renderer/components/LandingView/BilibiliSidebarIcon.vue b/src/renderer/components/LandingView/BilibiliSidebarIcon.vue
index a2db409c70..c0b37d95a0 100644
--- a/src/renderer/components/LandingView/BilibiliSidebarIcon.vue
+++ b/src/renderer/components/LandingView/BilibiliSidebarIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <div 
+  <div
     @mouseover="mouseover = true"
     @mouseout="mouseover = false"
     @mouseup="mouseupOnIcon(url)"
@@ -49,9 +49,9 @@
                 <use xlink:href="#path-1" />
               </mask>
               <circle
+                :stroke-width="selected ? 2 : 0"
                 stroke="#EBECF0"
                 fill="#20B0E3"
-                :stroke-width="selected ? 2 : 0"
                 cx="20"
                 cy="20"
                 r="20"
@@ -81,6 +81,7 @@
 </template>
 <script lang="ts">
 import { log } from '@/libs/Log';
+
 export default {
   props: {
     selected: {
@@ -96,7 +97,7 @@ export default {
       default: () => {
         log.debug('BilibiliSidebarIcon.vue', 'mouse up on button');
       },
-    },  
+    },
   },
   data() {
     return {
diff --git a/src/renderer/components/LandingView/YoutubeSidebarIcon.vue b/src/renderer/components/LandingView/YoutubeSidebarIcon.vue
index b591b6fdda..76ec541411 100644
--- a/src/renderer/components/LandingView/YoutubeSidebarIcon.vue
+++ b/src/renderer/components/LandingView/YoutubeSidebarIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <div 
+  <div
     @mouseover="mouseover = true"
     @mouseout="mouseover = false"
     @mouseup="mouseupOnIcon(url)"
@@ -7,7 +7,7 @@
       opacity: mouseover || selected ? '1.0' : '0.7',
     }"
   >
-   <svg
+    <svg
       width="42px"
       height="42px"
       viewBox="0 0 42 42"
@@ -50,9 +50,9 @@
                 <use xlink:href="#path-1" />
               </mask>
               <circle
+                :stroke-width="selected ? 2 : 0"
                 stroke="#EBECF0"
                 fill="#FF0000"
-                :stroke-width="selected ? 2 : 0"
                 cx="20"
                 cy="20"
                 r="20"
@@ -83,6 +83,7 @@
 </template>
 <script lang="ts">
 import { log } from '@/libs/Log';
+
 export default {
   props: {
     selected: {
diff --git a/src/renderer/components/LandingView/iQiyiSidebarIcon.vue b/src/renderer/components/LandingView/iQiyiSidebarIcon.vue
index 03d54e1949..2d879e7e20 100644
--- a/src/renderer/components/LandingView/iQiyiSidebarIcon.vue
+++ b/src/renderer/components/LandingView/iQiyiSidebarIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <div 
+  <div
     @mouseover="mouseover = true"
     @mouseout="mouseover = false"
     @mouseup="mouseupOnIcon(url)"
@@ -50,9 +50,9 @@
               <use xlink:href="#path-1" />
             </mask>
             <circle
+              :stroke-width="selected ? 2 : 0"
               stroke="#EBECF0"
               fill="#42BD56"
-              :stroke-width="selected ? 2 : 0"
               cx="20"
               cy="20"
               r="20"

From 4394a3c3783f2e21d58245735e788718783fc445 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 16:03:16 +0800
Subject: [PATCH 093/123] feat(browsing): ui adjust

---
 src/renderer/assets/icon/back-default-icon.svg        | 2 +-
 src/renderer/assets/icon/forward-default-icon.svg     | 2 +-
 src/renderer/assets/icon/pipDisabled-default-icon.svg | 4 ++--
 src/renderer/assets/icon/pop-default-icon.svg         | 2 +-
 src/renderer/assets/icon/sidebar-default-icon.svg     | 2 +-
 src/renderer/components/BaseIconContainer.vue         | 9 +++++++++
 6 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/renderer/assets/icon/back-default-icon.svg b/src/renderer/assets/icon/back-default-icon.svg
index fc3d80e59a..2611f227d6 100644
--- a/src/renderer/assets/icon/back-default-icon.svg
+++ b/src/renderer/assets/icon/back-default-icon.svg
@@ -4,6 +4,6 @@
     <title>icon--backward</title>
     <desc>Created with Sketch.</desc>
     <g id="2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M13.7804038,7.0344359 L8.06578833,12.7774637 C7.77152389,13.0731912 7.29775814,13.0746698 7.00202238,12.7789423 C6.70922927,12.4846935 6.71070059,12.0041363 7.00202238,11.7113661 L11.4277596,7.25623151 L0.750374326,7.25623151 C0.336932792,7.25623151 0,6.92058081 0,6.49916915 C0,6.08071476 0.341346754,5.74210678 0.750374326,5.74210678 C2.06558675,5.74210678 3.05199607,5.74210678 3.70960228,5.74210678 C5.42474834,5.74210678 7.99746744,5.74210678 11.4277596,5.74210678 L6.99466576,1.28697219 C6.70187265,0.992723348 6.70040132,0.516602086 6.99760841,0.219395966 C7.29334417,-0.0748528778 7.77446653,-0.0718956012 8.064317,0.220874611 L13.7804038,5.96538103 C14.0746682,6.25962987 14.0717256,6.74166567 13.7804038,7.0344359 Z" id="icon--backward" fill="#000" fill-rule="nonzero" transform="translate(7.000000, 6.500000) scale(-1, 1) translate(-7.000000, -6.500000) "></path>
+        <path d="M13.7804038,7.0344359 L8.06578833,12.7774637 C7.77152389,13.0731912 7.29775814,13.0746698 7.00202238,12.7789423 C6.70922927,12.4846935 6.71070059,12.0041363 7.00202238,11.7113661 L11.4277596,7.25623151 L0.750374326,7.25623151 C0.336932792,7.25623151 0,6.92058081 0,6.49916915 C0,6.08071476 0.341346754,5.74210678 0.750374326,5.74210678 C2.06558675,5.74210678 3.05199607,5.74210678 3.70960228,5.74210678 C5.42474834,5.74210678 7.99746744,5.74210678 11.4277596,5.74210678 L6.99466576,1.28697219 C6.70187265,0.992723348 6.70040132,0.516602086 6.99760841,0.219395966 C7.29334417,-0.0748528778 7.77446653,-0.0718956012 8.064317,0.220874611 L13.7804038,5.96538103 C14.0746682,6.25962987 14.0717256,6.74166567 13.7804038,7.0344359 Z" id="icon--backward" fill="#6E7085" fill-rule="nonzero" transform="translate(7.000000, 6.500000) scale(-1, 1) translate(-7.000000, -6.500000) "></path>
     </g>
 </svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/forward-default-icon.svg b/src/renderer/assets/icon/forward-default-icon.svg
index 76bcc69584..4fe2a78765 100644
--- a/src/renderer/assets/icon/forward-default-icon.svg
+++ b/src/renderer/assets/icon/forward-default-icon.svg
@@ -1,6 +1,6 @@
 <svg width="14px" height="13px" viewBox="0 0 14 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="收起侧边栏" transform="translate(-206.000000, -359.000000)" fill="#000" fill-rule="nonzero">
+        <g id="收起侧边栏" transform="translate(-206.000000, -359.000000)" fill="#6E7085" fill-rule="nonzero">
             <g id="可点状态颜色" transform="translate(213.000000, 365.500000) scale(-1, -1) translate(-213.000000, -365.500000) translate(206.000000, 359.000000)">
                 <path d="M13.7804038,7.0344359 L8.06578832,12.7774637 C7.77152388,13.0731912 7.29775813,13.0746698 7.00202237,12.7789423 C6.70922926,12.4846935 6.71070058,12.0041363 7.00202237,11.7113661 L11.4277596,7.25623151 L0.750374315,7.25623151 C0.336932781,7.25623151 -1.12367911e-08,6.92058081 -1.12367911e-08,6.49916915 C-1.12367911e-08,6.08071476 0.341346743,5.74210678 0.750374315,5.74210678 C2.06558674,5.74210678 3.05199606,5.74210678 3.70960227,5.74210678 C5.42474833,5.74210678 7.99746743,5.74210678 11.4277596,5.74210678 L6.99466575,1.28697219 C6.70187264,0.992723348 6.70040131,0.516602086 6.9976084,0.219395966 C7.29334416,-0.0748528778 7.77446652,-0.0718956012 8.06431699,0.220874611 L13.7804038,5.96538103 C14.0746682,6.25962987 14.0717256,6.74166567 13.7804038,7.0344359 Z" id="icon--backward" transform="translate(7.000000, 6.500000) scale(-1, 1) translate(-7.000000, -6.500000) "></path>
             </g>
diff --git a/src/renderer/assets/icon/pipDisabled-default-icon.svg b/src/renderer/assets/icon/pipDisabled-default-icon.svg
index 565e8bfa3d..8c63e12b2d 100644
--- a/src/renderer/assets/icon/pipDisabled-default-icon.svg
+++ b/src/renderer/assets/icon/pipDisabled-default-icon.svg
@@ -2,8 +2,8 @@
 <svg width="30px" height="23px" viewBox="0 0 30 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
     <desc>Created with Sketch.</desc>
-    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.6">
-        <g id="browseing" transform="translate(-431.000000, -324.000000)" fill="#000">
+    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
+        <g id="browseing" transform="translate(-431.000000, -324.000000)" fill="#6E7085">
             <g id="control-bar" transform="translate(238.000000, 300.000000)">
                 <g id="icon-pictureInPicture" transform="translate(192.000000, 19.000000)">
                     <path d="M3.43,5 L28.57,5 C29.9120519,5 31,6.08794806 31,7.43 L31,25.07 C31,26.4120519 29.9120519,27.5 28.57,27.5 L3.43,27.5 C2.08794806,27.5 1,26.4120519 1,25.07 L1,7.43 C1,6.08794806 2.08794806,5 3.43,5 Z M3.5,8.3 L3.5,24.2 C3.5,24.6418278 3.8581722,25 4.3,25 L27.7,25 C28.1418278,25 28.5,24.6418278 28.5,24.2 L28.5,8.3 C28.5,7.8581722 28.1418278,7.5 27.7,7.5 L4.3,7.5 C3.8581722,7.5 3.5,7.8581722 3.5,8.3 Z M14.6696026,14.5395022 L25.4438391,14.5395022 C25.8911898,14.5395022 26.2538391,14.9021515 26.2538391,15.3495022 L26.2538391,21.7295022 C26.2538391,22.1768528 25.8911898,22.5395022 25.4438391,22.5395022 L14.6696026,22.5395022 C14.222252,22.5395022 13.8596026,22.1768528 13.8596026,21.7295022 L13.8596026,15.3495022 C13.8596026,14.9021515 14.222252,14.5395022 14.6696026,14.5395022 Z" id="pictureInPicture"></path>
diff --git a/src/renderer/assets/icon/pop-default-icon.svg b/src/renderer/assets/icon/pop-default-icon.svg
index 79c7fc4b96..4d69c26bd5 100644
--- a/src/renderer/assets/icon/pop-default-icon.svg
+++ b/src/renderer/assets/icon/pop-default-icon.svg
@@ -1,7 +1,7 @@
 
 <svg width="19px" height="15px" viewBox="0 0 19 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="menuBar/__icon/--pictureOutPicture" transform="translate(-6.000000, -8.000000)" fill="#000" fill-opacity="0.6" fill-rule="nonzero">
+        <g id="menuBar/__icon/--pictureOutPicture" transform="translate(-6.000000, -8.000000)" fill="#6E7085" fill-rule="nonzero">
             <path d="M21.542,8.75 C22.3472312,8.75 23,9.40276883 23,10.208 L23,15.5 L24.389,15.5 C24.6574104,15.5 24.875,15.7175896 24.875,15.986 L24.875,21.764 C24.875,22.0324104 24.6574104,22.25 24.389,22.25 L15.111,22.25 C14.8425896,22.25 14.625,22.0324104 14.625,21.764 L14.625,20.75 L7.458,20.75 C6.65276883,20.75 6,20.0972312 6,19.292 L6,10.208 C6,9.40276883 6.65276883,8.75 7.458,8.75 L21.542,8.75 Z M21.02,10.25 L7.98,10.25 C7.71490332,10.25 7.5,10.4649033 7.5,10.73 L7.5,18.77 C7.5,19.0350967 7.71490332,19.25 7.98,19.25 L14.625,19.25 L14.625,15.986 C14.625,15.7175896 14.8425896,15.5 15.111,15.5 L21.5,15.5 L21.5,10.73 C21.5,10.4649033 21.2850967,10.25 21.02,10.25 Z" id="icon--pictureOutPicture"></path>
         </g>
     </g>
diff --git a/src/renderer/assets/icon/sidebar-default-icon.svg b/src/renderer/assets/icon/sidebar-default-icon.svg
index a7afc69f9b..df6b4868d9 100644
--- a/src/renderer/assets/icon/sidebar-default-icon.svg
+++ b/src/renderer/assets/icon/sidebar-default-icon.svg
@@ -1,6 +1,6 @@
 <svg width="14px" height="12px" viewBox="0 0 14 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="收起侧边栏" transform="translate(-261.000000, -290.000000)" fill-opacity="0.6" fill="#000" fill-rule="nonzero">
+        <g id="收起侧边栏" transform="translate(-261.000000, -290.000000)" fill="#6E7085" fill-rule="nonzero">
             <g id="sidebar-default-icon" transform="translate(261.000000, 290.000000)">
                 <path d="M13.1966203,10.15 C13.6384481,10.15 13.9966203,10.5081722 13.9966203,10.95 C13.9966203,11.3918278 13.6384481,11.75 13.1966203,11.75 L0.803379678,11.75 C0.361551878,11.75 0.00337967812,11.3918278 0.00337967812,10.95 C0.00337967812,10.5081722 0.361551878,10.15 0.803379678,10.15 L13.1966203,10.15 Z M13.1966203,5.2 C13.6384481,5.2 13.9966203,5.5581722 13.9966203,6 C13.9966203,6.4418278 13.6384481,6.8 13.1966203,6.8 L0.803379678,6.8 C0.361551878,6.8 0.00337967812,6.4418278 0.00337967812,6 C0.00337967812,5.5581722 0.361551878,5.2 0.803379678,5.2 L13.1966203,5.2 Z M13.1966203,0.25 C13.6384481,0.25 13.9966203,0.6081722 13.9966203,1.05 C13.9966203,1.4918278 13.6384481,1.85 13.1966203,1.85 L0.803379678,1.85 C0.361551878,1.85 0.00337967812,1.4918278 0.00337967812,1.05 C0.00337967812,0.6081722 0.361551878,0.25 0.803379678,0.25 L13.1966203,0.25 Z" id="形状"></path>
             </g>
diff --git a/src/renderer/components/BaseIconContainer.vue b/src/renderer/components/BaseIconContainer.vue
index 5780a54905..f6546018be 100644
--- a/src/renderer/components/BaseIconContainer.vue
+++ b/src/renderer/components/BaseIconContainer.vue
@@ -556,6 +556,15 @@ screen and (min-aspect-ratio: 1/1) and (min-height: 1080px) {
 .back, .forward, .pageRefresh {
   width: 16px;
   height: 16px;
+ .default {
+    display: block;
+  }
+  .hover {
+    display: none;
+  }
+  .active {
+    display: none;
+  } 
 }
 .down {
   width: 5px;

From 7084d7d3e00044636dedb599b7b1cd008d76af82 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 16:06:43 +0800
Subject: [PATCH 094/123] style(browsing): adjust implement

---
 src/renderer/components/BrowsingView/BrowsingPipControl.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/renderer/components/BrowsingView/BrowsingPipControl.vue b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
index 16969ebea9..a631a53878 100644
--- a/src/renderer/components/BrowsingView/BrowsingPipControl.vue
+++ b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
@@ -3,7 +3,7 @@
     class="pip-control"
   >
     <div
-      @mouseup="handlePip"
+      @mouseup="handleEnterPip(pip === 'Enter')"
       :style="{
         opacity: hasVideo ? 1.0 : 0.3,
       }"
@@ -60,9 +60,6 @@ export default {
     },
   },
   methods: {
-    handlePip() {
-      this.pip === 'Enter' ? this.handleEnterPip(true) : this.handleEnterPip(false);
-    },
     switchPipType() {
       this.pip = this.pip === 'Enter' ? 'Global' : 'Enter';
       this.switchPip = true;

From abb9d05bb126ebc43ff55f23c8992c7e360cf21d Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Fri, 6 Sep 2019 16:25:39 +0800
Subject: [PATCH 095/123] style(browsingview): add conditions to enable exit
 pip menu

---
 src/main/index.js                         | 9 ++++++---
 src/main/menu/Menu.ts                     | 5 ++---
 src/main/menu/MenuService.ts              | 8 ++++----
 src/renderer/components/BrowsingPip.vue   | 3 ---
 src/renderer/services/menu/MenuService.ts | 4 ++--
 5 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index a2d42668ed..fd92974abc 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -332,6 +332,9 @@ function createBrowsingWindow(args) {
     if (args.position.length) {
       browsingWindow.setPosition(args.position[0], args.position[1]);
     }
+    browsingWindow.on('focus', () => {
+      menuService.updateFocusedWindow(false, mainWindow && mainWindow.isVisible());
+    });
   });
   browsingWindow.on('leave-full-screen', () => {
     if (hideBrowsingWindow) {
@@ -728,7 +731,7 @@ function registerMainWindowEvent(mainWindow) {
       danmu.style.opacity = ${args.opacity};
       danmu.style.cursor = ${args.opacity} === 1 ? "cursor" : "default"`,
     );
-    menuService.updateFocusedWindow(false);
+    menuService.updateFocusedWindow(false, mainWindow && mainWindow.isVisible());
     browsingWindow.focus();
   });
   ipcMain.on('enter-pip', (evt, args) => {
@@ -789,7 +792,7 @@ function registerMainWindowEvent(mainWindow) {
       danmu.style.opacity = ${args.opacity};
       danmu.style.cursor = ${args.opacity} === 1 ? "cursor" : "default"`,
     );
-    menuService.updateFocusedWindow(false);
+    menuService.updateFocusedWindow(false, mainWindow && mainWindow.isVisible());
     browsingWindow.focus();
   });
   ipcMain.on('update-pip-size', (evt, args) => {
@@ -835,7 +838,7 @@ function registerMainWindowEvent(mainWindow) {
     } else {
       browsingWindow.hide();
     }
-    menuService.updateFocusedWindow(true);
+    menuService.updateFocusedWindow(true, mainWindow && mainWindow.isVisible());
     mainWindow.focus();
   });
   ipcMain.on('update-route-name', (e, route) => {
diff --git a/src/main/menu/Menu.ts b/src/main/menu/Menu.ts
index 1679f7c9d6..7ce993eb4a 100644
--- a/src/main/menu/Menu.ts
+++ b/src/main/menu/Menu.ts
@@ -62,14 +62,13 @@ export default class Menubar {
     this.menuStateControl();
   }
 
-  public updateFocusedWindow(isMainWindow: boolean) {
+  public updateFocusedWindow(isMainWindow: boolean, isNewWindow: boolean) {
     if (this.focusOnMainWindow !== isMainWindow) {
       if (!isMainWindow) {
         this.updateMenuItemEnabled('history.back', false);
         this.updateMenuItemEnabled('history.forward', false);
         this.updateMenuItemEnabled('history.reload', false);
-        this.updateMenuItemEnabled('browsing.window.pip', true);
-        this.updateMenuItemEnabled('browsing.window.playInNewWindow', true);
+        this.updateMenuItemEnabled(isNewWindow ? 'browsing.window.playInNewWindow' : 'browsing.window.pip', true);
         this.updateMenuItemEnabled('browsing.window.keepPipFront', true);
         this.updateMenuItemLabel('browsing.window.pip', 'msg.window.exitPip');
         this.updateMenuItemLabel('browsing.window.playInNewWindow', 'msg.window.backToBrowser');
diff --git a/src/main/menu/MenuService.ts b/src/main/menu/MenuService.ts
index 2dea5afe9c..01a76c20f3 100644
--- a/src/main/menu/MenuService.ts
+++ b/src/main/menu/MenuService.ts
@@ -20,8 +20,8 @@ export default class MenuService {
     this.menu.enableMenu(enable);
   }
 
-  public updateFocusedWindow(isFocusedOnMain: boolean) {
-    this.menu.updateFocusedWindow(isFocusedOnMain);
+  public updateFocusedWindow(isFocusedOnMain: boolean, isNewWindow: boolean) {
+    this.menu.updateFocusedWindow(isFocusedOnMain, isNewWindow);
   }
 
   public updatePipIcon() {
@@ -59,8 +59,8 @@ export default class MenuService {
     ipcMain.on('update-enabled', (e: Event, id: string, enabled: boolean) => {
       this.menu.updateMenuItemEnabled(id, enabled);
     });
-    ipcMain.on('update-focused-window', (e: Event, isFocusedOnMain: boolean) => {
-      this.menu.updateFocusedWindow(isFocusedOnMain);
+    ipcMain.on('update-focused-window', (e: Event, isFocusedOnMain: boolean, isNewWindow: boolean) => {
+      this.menu.updateFocusedWindow(isFocusedOnMain, isNewWindow);
     });
   }
 }
diff --git a/src/renderer/components/BrowsingPip.vue b/src/renderer/components/BrowsingPip.vue
index 7727125adf..c270fc9f8a 100644
--- a/src/renderer/components/BrowsingPip.vue
+++ b/src/renderer/components/BrowsingPip.vue
@@ -90,9 +90,6 @@ export default {
     electron.remote.getCurrentWindow().addListener('enter-html-full-screen', () => {
       electron.ipcRenderer.send('mouseup', 'full');
     });
-    window.addEventListener('focus', () => {
-      this.menuService.updateFocusedWindow(false);
-    });
     window.addEventListener('resize', throttle(() => {
       const size = electron.remote.getCurrentWindow().getSize();
       electron.ipcRenderer.send('update-pip-size', size);
diff --git a/src/renderer/services/menu/MenuService.ts b/src/renderer/services/menu/MenuService.ts
index c90df214b5..c8c5ff1522 100644
--- a/src/renderer/services/menu/MenuService.ts
+++ b/src/renderer/services/menu/MenuService.ts
@@ -32,8 +32,8 @@ export default class MenuService {
     ipcRenderer.send('update-enabled', id, enabled);
   }
 
-  public updateFocusedWindow(isFocusedOnMain: boolean) {
-    ipcRenderer.send('update-focused-window', isFocusedOnMain);
+  public updateFocusedWindow(isFocusedOnMain: boolean, isNewWindow: boolean) {
+    ipcRenderer.send('update-focused-window', isFocusedOnMain, isNewWindow);
   }
 
   public resolveMute(state: boolean) {

From 7dbea11d681ae052701349f67a32b94b844fae99 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 16:53:20 +0800
Subject: [PATCH 096/123] feat(browsing): icon adjustment

---
 src/renderer/assets/icon/back-active-icon.svg |  9 -------
 .../assets/icon/back-default-icon.svg         | 10 +++----
 .../assets/icon/backDisabled-default-icon.svg | 10 +++----
 .../assets/icon/forward-active-icon.svg       |  9 -------
 .../assets/icon/forward-default-icon.svg      | 16 +++++------
 .../assets/icon/forward-hover-icon.svg        |  9 -------
 .../icon/forwardDisabled-default-icon.svg     | 14 +++++-----
 .../assets/icon/menuBar/__icon/--close.svg    |  9 +++++++
 .../icon/menuBar/__icon/--closeinactive.svg   |  9 +++++++
 .../icon/menuBar/__icon/--fullscreen.svg      |  9 +++++++
 .../menuBar/__icon/--fullscreeninactive.svg   |  9 +++++++
 .../assets/icon/menuBar/__icon/--minimize.svg |  9 +++++++
 .../menuBar/__icon/--minimizeinactive.svg     |  9 +++++++
 .../icon/menuBar/__icon/--refreshinactive.svg |  9 +++++++
 .../icon/menuBar/__icon/--sidebarinactive.svg |  9 +++++++
 .../icon/menuBar/__icon/--stopRefresh.svg     |  9 +++++++
 .../menuBar/__icon/--stopRefreshinactive.svg  |  9 +++++++
 .../menuBar/__icon/--switchModeinactive.svg   |  9 +++++++
 .../assets/icon/pageRefresh-active-icon.svg   | 14 ----------
 .../assets/icon/pageRefresh-default-icon.svg  | 17 +++++-------
 .../assets/icon/pageRefresh-hover-icon.svg    | 17 ------------
 src/renderer/assets/icon/pip-active-icon.svg  | 10 -------
 src/renderer/assets/icon/pip-default-icon.svg | 12 +++++----
 src/renderer/assets/icon/pip-hover-icon.svg   | 10 -------
 .../assets/icon/pipDisabled-default-icon.svg  | 17 +++++-------
 src/renderer/assets/icon/pop-default-icon.svg | 13 ++++-----
 .../assets/icon/popDisabled-default-icon.svg  |  9 +++++++
 .../assets/icon/sidebar-default-icon.svg      | 16 +++++------
 .../assets/icon/switchMode-default-icon.svg   |  9 +++++++
 src/renderer/components/BaseIconContainer.vue | 26 ------------------
 .../components/BrowsingView/BrowsingInput.vue |  2 +-
 .../BrowsingView/BrowsingPipControl.vue       | 27 ++++++++++---------
 32 files changed, 192 insertions(+), 183 deletions(-)
 delete mode 100644 src/renderer/assets/icon/back-active-icon.svg
 delete mode 100644 src/renderer/assets/icon/forward-active-icon.svg
 delete mode 100644 src/renderer/assets/icon/forward-hover-icon.svg
 create mode 100644 src/renderer/assets/icon/menuBar/__icon/--close.svg
 create mode 100644 src/renderer/assets/icon/menuBar/__icon/--closeinactive.svg
 create mode 100644 src/renderer/assets/icon/menuBar/__icon/--fullscreen.svg
 create mode 100644 src/renderer/assets/icon/menuBar/__icon/--fullscreeninactive.svg
 create mode 100644 src/renderer/assets/icon/menuBar/__icon/--minimize.svg
 create mode 100644 src/renderer/assets/icon/menuBar/__icon/--minimizeinactive.svg
 create mode 100644 src/renderer/assets/icon/menuBar/__icon/--refreshinactive.svg
 create mode 100644 src/renderer/assets/icon/menuBar/__icon/--sidebarinactive.svg
 create mode 100644 src/renderer/assets/icon/menuBar/__icon/--stopRefresh.svg
 create mode 100644 src/renderer/assets/icon/menuBar/__icon/--stopRefreshinactive.svg
 create mode 100644 src/renderer/assets/icon/menuBar/__icon/--switchModeinactive.svg
 delete mode 100644 src/renderer/assets/icon/pageRefresh-active-icon.svg
 delete mode 100644 src/renderer/assets/icon/pageRefresh-hover-icon.svg
 delete mode 100644 src/renderer/assets/icon/pip-active-icon.svg
 delete mode 100644 src/renderer/assets/icon/pip-hover-icon.svg
 create mode 100644 src/renderer/assets/icon/popDisabled-default-icon.svg
 create mode 100644 src/renderer/assets/icon/switchMode-default-icon.svg

diff --git a/src/renderer/assets/icon/back-active-icon.svg b/src/renderer/assets/icon/back-active-icon.svg
deleted file mode 100644
index 279d626230..0000000000
--- a/src/renderer/assets/icon/back-active-icon.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="15px" height="14px" viewBox="0 0 15 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.45">
-        <g id="browseing" transform="translate(-81.000000, -11.000000)" fill="#FFFFFF">
-            <g id="back" transform="translate(81.000000, 11.000000)">
-                <path d="M2.5034271,7.75214251 L6.53829467,12.6741045 C6.77841425,12.9670161 6.76245981,13.3929889 6.50110221,13.6671181 L6.39621564,13.7771301 C6.12143551,14.0653377 5.66504376,14.0762228 5.37683614,13.8014427 C5.35550942,13.7811096 5.33544922,13.7594883 5.31676839,13.7367003 L0.362980511,7.69378681 C0.345414441,7.67860066 0.32841789,7.6624305 0.312064596,7.64527808 L0.207178032,7.53526609 C0.0653333835,7.38649001 -0.00422832962,7.19298876 0.000198711274,7.00030653 C-0.00422832963,6.80762431 0.0653333835,6.61412306 0.207178032,6.46534698 L0.312064596,6.35533499 C0.32841789,6.33818257 0.345414441,6.32201241 0.362980511,6.30682626 L5.31676839,0.263912758 C5.33544922,0.241124813 5.35550942,0.219503464 5.37683614,0.199170357 C5.66504376,-0.0756097699 6.12143551,-0.064724629 6.39621564,0.223482999 L6.50110221,0.333494986 C6.76245981,0.607624187 6.77841425,1.03359697 6.53829467,1.32650856 L2.52743897,6.21917951 L14.2381711,6.21917951 C14.6614871,6.21917951 15.0046526,6.56234497 15.0046526,6.98566101 C15.0046526,7.40897705 14.6614871,7.75214251 14.2381711,7.75214251 L2.5034271,7.75214251 Z" id="形状结合"></path>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/src/renderer/assets/icon/back-default-icon.svg b/src/renderer/assets/icon/back-default-icon.svg
index 2611f227d6..a891fefc15 100644
--- a/src/renderer/assets/icon/back-default-icon.svg
+++ b/src/renderer/assets/icon/back-default-icon.svg
@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="14px" height="13px" viewBox="0 0 14 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 56.2 (81672) - https://sketch.com -->
-    <title>icon--backward</title>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--backward</title>
     <desc>Created with Sketch.</desc>
-    <g id="2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M13.7804038,7.0344359 L8.06578833,12.7774637 C7.77152389,13.0731912 7.29775814,13.0746698 7.00202238,12.7789423 C6.70922927,12.4846935 6.71070059,12.0041363 7.00202238,11.7113661 L11.4277596,7.25623151 L0.750374326,7.25623151 C0.336932792,7.25623151 0,6.92058081 0,6.49916915 C0,6.08071476 0.341346754,5.74210678 0.750374326,5.74210678 C2.06558675,5.74210678 3.05199607,5.74210678 3.70960228,5.74210678 C5.42474834,5.74210678 7.99746744,5.74210678 11.4277596,5.74210678 L6.99466576,1.28697219 C6.70187265,0.992723348 6.70040132,0.516602086 6.99760841,0.219395966 C7.29334417,-0.0748528778 7.77446653,-0.0718956012 8.064317,0.220874611 L13.7804038,5.96538103 C14.0746682,6.25962987 14.0717256,6.74166567 13.7804038,7.0344359 Z" id="icon--backward" fill="#6E7085" fill-rule="nonzero" transform="translate(7.000000, 6.500000) scale(-1, 1) translate(-7.000000, -6.500000) "></path>
+    <g id="menuBar/__icon/--backward" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M22.7804038,15.5344359 L17.0657883,21.2774637 C16.7715239,21.5731912 16.2977581,21.5746698 16.0020224,21.2789423 C15.7092293,20.9846935 15.7107006,20.5041363 16.0020224,20.2113661 L20.4277596,15.7562315 L9.75037433,15.7562315 C9.33693279,15.7562315 9,15.4205808 9,14.9991691 C9,14.5807148 9.34134675,14.2421068 9.75037433,14.2421068 C11.0655868,14.2421068 12.0519961,14.2421068 12.7096023,14.2421068 C14.4247483,14.2421068 16.9974674,14.2421068 20.4277596,14.2421068 L15.9946658,9.78697219 C15.7018726,9.49272335 15.7004013,9.01660209 15.9976084,8.71939597 C16.2933442,8.42514712 16.7744665,8.4281044 17.064317,8.72087461 L22.7804038,14.465381 C23.0746682,14.7596299 23.0717256,15.2416657 22.7804038,15.5344359 Z" id="icon--backward" fill="#7E808F" fill-rule="nonzero" transform="translate(16.000000, 15.000000) scale(-1, 1) translate(-16.000000, -15.000000) "></path>
     </g>
 </svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/backDisabled-default-icon.svg b/src/renderer/assets/icon/backDisabled-default-icon.svg
index 62d7e45272..6abd059e21 100644
--- a/src/renderer/assets/icon/backDisabled-default-icon.svg
+++ b/src/renderer/assets/icon/backDisabled-default-icon.svg
@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="14px" height="13px" viewBox="0 0 14 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 56.2 (81672) - https://sketch.com -->
-    <title>icon--backward备份 2</title>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--backwardinactive</title>
     <desc>Created with Sketch.</desc>
-    <g id="2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M13.7804038,7.0344359 L8.06578833,12.7774637 C7.77152389,13.0731912 7.29775814,13.0746698 7.00202238,12.7789423 C6.70922927,12.4846935 6.71070059,12.0041363 7.00202238,11.7113661 L11.4277596,7.25623151 L0.750374326,7.25623151 C0.336932792,7.25623151 0,6.92058081 0,6.49916915 C0,6.08071476 0.341346754,5.74210678 0.750374326,5.74210678 C2.06558675,5.74210678 3.05199607,5.74210678 3.70960228,5.74210678 C5.42474834,5.74210678 7.99746744,5.74210678 11.4277596,5.74210678 L6.99466576,1.28697219 C6.70187265,0.992723348 6.70040132,0.516602086 6.99760841,0.219395966 C7.29334417,-0.0748528778 7.77446653,-0.0718956012 8.064317,0.220874611 L13.7804038,5.96538103 C14.0746682,6.25962987 14.0717256,6.74166567 13.7804038,7.0344359 Z" id="icon--backward备份-2" fill="#D4D5DD" fill-rule="nonzero" transform="translate(7.000000, 6.500000) scale(-1, 1) translate(-7.000000, -6.500000) "></path>
+    <g id="menuBar/__icon/--backward" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M22.7804038,15.5344359 L17.0657883,21.2774637 C16.7715239,21.5731912 16.2977581,21.5746698 16.0020224,21.2789423 C15.7092293,20.9846935 15.7107006,20.5041363 16.0020224,20.2113661 L20.4277596,15.7562315 L9.75037433,15.7562315 C9.33693279,15.7562315 9,15.4205808 9,14.9991691 C9,14.5807148 9.34134675,14.2421068 9.75037433,14.2421068 C11.0655868,14.2421068 12.0519961,14.2421068 12.7096023,14.2421068 C14.4247483,14.2421068 16.9974674,14.2421068 20.4277596,14.2421068 L15.9946658,9.78697219 C15.7018726,9.49272335 15.7004013,9.01660209 15.9976084,8.71939597 C16.2933442,8.42514712 16.7744665,8.4281044 17.064317,8.72087461 L22.7804038,14.465381 C23.0746682,14.7596299 23.0717256,15.2416657 22.7804038,15.5344359 Z" id="icon--backward" fill="#CFD0DA" fill-rule="nonzero" transform="translate(16.000000, 15.000000) scale(-1, 1) translate(-16.000000, -15.000000) "></path>
     </g>
 </svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/forward-active-icon.svg b/src/renderer/assets/icon/forward-active-icon.svg
deleted file mode 100644
index 04218c99dc..0000000000
--- a/src/renderer/assets/icon/forward-active-icon.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="15px" height="14px" viewBox="0 0 15 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.45">
-        <g id="browseing" transform="translate(-116.000000, -11.000000)" fill="#FFFFFF">
-            <g id="back" transform="translate(123.500000, 18.000000) scale(-1, 1) translate(-123.500000, -18.000000) translate(116.000000, 11.000000)">
-                <path d="M2.5034271,7.75214251 L6.53829467,12.6741045 C6.77841425,12.9670161 6.76245981,13.3929889 6.50110221,13.6671181 L6.39621564,13.7771301 C6.12143551,14.0653377 5.66504376,14.0762228 5.37683614,13.8014427 C5.35550942,13.7811096 5.33544922,13.7594883 5.31676839,13.7367003 L0.362980511,7.69378681 C0.345414441,7.67860066 0.32841789,7.6624305 0.312064596,7.64527808 L0.207178032,7.53526609 C0.0653333835,7.38649001 -0.00422832962,7.19298876 0.000198711274,7.00030653 C-0.00422832963,6.80762431 0.0653333835,6.61412306 0.207178032,6.46534698 L0.312064596,6.35533499 C0.32841789,6.33818257 0.345414441,6.32201241 0.362980511,6.30682626 L5.31676839,0.263912758 C5.33544922,0.241124813 5.35550942,0.219503464 5.37683614,0.199170357 C5.66504376,-0.0756097699 6.12143551,-0.064724629 6.39621564,0.223482999 L6.50110221,0.333494986 C6.76245981,0.607624187 6.77841425,1.03359697 6.53829467,1.32650856 L2.52743897,6.21917951 L14.2381711,6.21917951 C14.6614871,6.21917951 15.0046526,6.56234497 15.0046526,6.98566101 C15.0046526,7.40897705 14.6614871,7.75214251 14.2381711,7.75214251 L2.5034271,7.75214251 Z" id="形状结合"></path>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/src/renderer/assets/icon/forward-default-icon.svg b/src/renderer/assets/icon/forward-default-icon.svg
index 4fe2a78765..57abf93c63 100644
--- a/src/renderer/assets/icon/forward-default-icon.svg
+++ b/src/renderer/assets/icon/forward-default-icon.svg
@@ -1,9 +1,9 @@
-<svg width="14px" height="13px" viewBox="0 0 14 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="收起侧边栏" transform="translate(-206.000000, -359.000000)" fill="#6E7085" fill-rule="nonzero">
-            <g id="可点状态颜色" transform="translate(213.000000, 365.500000) scale(-1, -1) translate(-213.000000, -365.500000) translate(206.000000, 359.000000)">
-                <path d="M13.7804038,7.0344359 L8.06578832,12.7774637 C7.77152388,13.0731912 7.29775813,13.0746698 7.00202237,12.7789423 C6.70922926,12.4846935 6.71070058,12.0041363 7.00202237,11.7113661 L11.4277596,7.25623151 L0.750374315,7.25623151 C0.336932781,7.25623151 -1.12367911e-08,6.92058081 -1.12367911e-08,6.49916915 C-1.12367911e-08,6.08071476 0.341346743,5.74210678 0.750374315,5.74210678 C2.06558674,5.74210678 3.05199606,5.74210678 3.70960227,5.74210678 C5.42474833,5.74210678 7.99746743,5.74210678 11.4277596,5.74210678 L6.99466575,1.28697219 C6.70187264,0.992723348 6.70040131,0.516602086 6.9976084,0.219395966 C7.29334416,-0.0748528778 7.77446652,-0.0718956012 8.06431699,0.220874611 L13.7804038,5.96538103 C14.0746682,6.25962987 14.0717256,6.74166567 13.7804038,7.0344359 Z" id="icon--backward" transform="translate(7.000000, 6.500000) scale(-1, 1) translate(-7.000000, -6.500000) "></path>
-            </g>
-        </g>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--forward</title>
+    <desc>Created with Sketch.</desc>
+    <g id="menuBar/__icon/--forward" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M20.7804038,15.5344359 L15.0657883,21.2774637 C14.7715239,21.5731912 14.2977581,21.5746698 14.0020224,21.2789423 C13.7092293,20.9846935 13.7107006,20.5041363 14.0020224,20.2113661 L18.4277596,15.7562315 L7.75037433,15.7562315 C7.33693279,15.7562315 7,15.4205808 7,14.9991691 C7,14.5807148 7.34134675,14.2421068 7.75037433,14.2421068 C9.06558675,14.2421068 10.0519961,14.2421068 10.7096023,14.2421068 C12.4247483,14.2421068 14.9974674,14.2421068 18.4277596,14.2421068 L13.9946658,9.78697219 C13.7018726,9.49272335 13.7004013,9.01660209 13.9976084,8.71939597 C14.2933442,8.42514712 14.7744665,8.4281044 15.064317,8.72087461 L20.7804038,14.465381 C21.0746682,14.7596299 21.0717256,15.2416657 20.7804038,15.5344359 Z" id="icon" fill="#7E808F" fill-rule="nonzero"></path>
     </g>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/forward-hover-icon.svg b/src/renderer/assets/icon/forward-hover-icon.svg
deleted file mode 100644
index c8604c8f07..0000000000
--- a/src/renderer/assets/icon/forward-hover-icon.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="15px" height="14px" viewBox="0 0 15 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="1">
-        <g id="browseing" transform="translate(-116.000000, -11.000000)" fill="#6F67078">
-            <g id="back" transform="translate(123.500000, 18.000000) scale(-1, 1) translate(-123.500000, -18.000000) translate(116.000000, 11.000000)">
-                <path d="M2.5034271,7.75214251 L6.53829467,12.6741045 C6.77841425,12.9670161 6.76245981,13.3929889 6.50110221,13.6671181 L6.39621564,13.7771301 C6.12143551,14.0653377 5.66504376,14.0762228 5.37683614,13.8014427 C5.35550942,13.7811096 5.33544922,13.7594883 5.31676839,13.7367003 L0.362980511,7.69378681 C0.345414441,7.67860066 0.32841789,7.6624305 0.312064596,7.64527808 L0.207178032,7.53526609 C0.0653333835,7.38649001 -0.00422832962,7.19298876 0.000198711274,7.00030653 C-0.00422832963,6.80762431 0.0653333835,6.61412306 0.207178032,6.46534698 L0.312064596,6.35533499 C0.32841789,6.33818257 0.345414441,6.32201241 0.362980511,6.30682626 L5.31676839,0.263912758 C5.33544922,0.241124813 5.35550942,0.219503464 5.37683614,0.199170357 C5.66504376,-0.0756097699 6.12143551,-0.064724629 6.39621564,0.223482999 L6.50110221,0.333494986 C6.76245981,0.607624187 6.77841425,1.03359697 6.53829467,1.32650856 L2.52743897,6.21917951 L14.2381711,6.21917951 C14.6614871,6.21917951 15.0046526,6.56234497 15.0046526,6.98566101 C15.0046526,7.40897705 14.6614871,7.75214251 14.2381711,7.75214251 L2.5034271,7.75214251 Z" id="形状结合"></path>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/src/renderer/assets/icon/forwardDisabled-default-icon.svg b/src/renderer/assets/icon/forwardDisabled-default-icon.svg
index 3c9e92cd5a..db90aef3bd 100644
--- a/src/renderer/assets/icon/forwardDisabled-default-icon.svg
+++ b/src/renderer/assets/icon/forwardDisabled-default-icon.svg
@@ -1,7 +1,9 @@
-<svg width="14px" height="13px" viewBox="0 0 14 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="不可点状态颜色" transform="translate(7.000000, 6.500000) scale(-1, 1) translate(-7.000000, -6.500000) " fill="#D4D5DD" fill-rule="nonzero">
-            <path d="M13.7804038,7.0344359 L8.06578832,12.7774637 C7.77152388,13.0731912 7.29775813,13.0746698 7.00202237,12.7789423 C6.70922926,12.4846935 6.71070058,12.0041363 7.00202237,11.7113661 L11.4277596,7.25623151 L0.750374315,7.25623151 C0.336932781,7.25623151 -1.12367911e-08,6.92058081 -1.12367911e-08,6.49916915 C-1.12367911e-08,6.08071476 0.341346743,5.74210678 0.750374315,5.74210678 C2.06558674,5.74210678 3.05199606,5.74210678 3.70960227,5.74210678 C5.42474833,5.74210678 7.99746743,5.74210678 11.4277596,5.74210678 L6.99466575,1.28697219 C6.70187264,0.992723348 6.70040131,0.516602086 6.9976084,0.219395966 C7.29334416,-0.0748528778 7.77446652,-0.0718956012 8.06431699,0.220874611 L13.7804038,5.96538103 C14.0746682,6.25962987 14.0717256,6.74166567 13.7804038,7.0344359 Z" id="icon--backward备份-2" transform="translate(7.000000, 6.500000) scale(-1, 1) translate(-7.000000, -6.500000) "></path>
-        </g>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--forwardinactive</title>
+    <desc>Created with Sketch.</desc>
+    <g id="menuBar/__icon/--forward" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M20.7804038,15.5344359 L15.0657883,21.2774637 C14.7715239,21.5731912 14.2977581,21.5746698 14.0020224,21.2789423 C13.7092293,20.9846935 13.7107006,20.5041363 14.0020224,20.2113661 L18.4277596,15.7562315 L7.75037433,15.7562315 C7.33693279,15.7562315 7,15.4205808 7,14.9991691 C7,14.5807148 7.34134675,14.2421068 7.75037433,14.2421068 C9.06558675,14.2421068 10.0519961,14.2421068 10.7096023,14.2421068 C12.4247483,14.2421068 14.9974674,14.2421068 18.4277596,14.2421068 L13.9946658,9.78697219 C13.7018726,9.49272335 13.7004013,9.01660209 13.9976084,8.71939597 C14.2933442,8.42514712 14.7744665,8.4281044 15.064317,8.72087461 L20.7804038,14.465381 C21.0746682,14.7596299 21.0717256,15.2416657 20.7804038,15.5344359 Z" id="icon" fill="#CFD0DA" fill-rule="nonzero"></path>
     </g>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/menuBar/__icon/--close.svg b/src/renderer/assets/icon/menuBar/__icon/--close.svg
new file mode 100644
index 0000000000..60331b4730
--- /dev/null
+++ b/src/renderer/assets/icon/menuBar/__icon/--close.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--close</title>
+    <desc>Created with Sketch.</desc>
+    <g id="menuBar/__icon/--close" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10.1209632,8.98959236 L14.9992778,13.8682778 L19.8790368,8.98959236 C20.1630545,8.70557469 20.6074957,8.67975491 20.9206813,8.912133 L21.0104076,8.98959236 C21.3228271,9.30201179 21.3228271,9.80854378 21.0104076,10.1209632 L21.0104076,10.1209632 L16.1312778,14.9992778 L21.0104076,19.8790368 C21.3228271,20.1914562 21.3228271,20.6979882 21.0104076,21.0104076 C20.6979882,21.3228271 20.1914562,21.3228271 19.8790368,21.0104076 L14.9992778,16.1312778 L10.1209632,21.0104076 C9.83694554,21.2944253 9.39250428,21.3202451 9.07931869,21.087867 L8.98959236,21.0104076 C8.67717293,20.6979882 8.67717293,20.1914562 8.98959236,19.8790368 L8.98959236,19.8790368 L13.8682778,14.9992778 L8.98959236,10.1209632 C8.67717293,9.80854378 8.67717293,9.30201179 8.98959236,8.98959236 C9.30201179,8.67717293 9.80854378,8.67717293 10.1209632,8.98959236 Z" id="icon" fill="#7E808F" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/menuBar/__icon/--closeinactive.svg b/src/renderer/assets/icon/menuBar/__icon/--closeinactive.svg
new file mode 100644
index 0000000000..0779f134e5
--- /dev/null
+++ b/src/renderer/assets/icon/menuBar/__icon/--closeinactive.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--closeinactive</title>
+    <desc>Created with Sketch.</desc>
+    <g id="menuBar/__icon/--close" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10.1209632,8.98959236 L14.9992778,13.8682778 L19.8790368,8.98959236 C20.1630545,8.70557469 20.6074957,8.67975491 20.9206813,8.912133 L21.0104076,8.98959236 C21.3228271,9.30201179 21.3228271,9.80854378 21.0104076,10.1209632 L21.0104076,10.1209632 L16.1312778,14.9992778 L21.0104076,19.8790368 C21.3228271,20.1914562 21.3228271,20.6979882 21.0104076,21.0104076 C20.6979882,21.3228271 20.1914562,21.3228271 19.8790368,21.0104076 L14.9992778,16.1312778 L10.1209632,21.0104076 C9.83694554,21.2944253 9.39250428,21.3202451 9.07931869,21.087867 L8.98959236,21.0104076 C8.67717293,20.6979882 8.67717293,20.1914562 8.98959236,19.8790368 L8.98959236,19.8790368 L13.8682778,14.9992778 L8.98959236,10.1209632 C8.67717293,9.80854378 8.67717293,9.30201179 8.98959236,8.98959236 C9.30201179,8.67717293 9.80854378,8.67717293 10.1209632,8.98959236 Z" id="icon" fill="#CFD0DA" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/menuBar/__icon/--fullscreen.svg b/src/renderer/assets/icon/menuBar/__icon/--fullscreen.svg
new file mode 100644
index 0000000000..524c0dbf90
--- /dev/null
+++ b/src/renderer/assets/icon/menuBar/__icon/--fullscreen.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--fullscreen</title>
+    <desc>Created with Sketch.</desc>
+    <g id="menuBar/__icon/--fullscreen" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M9.3,21.5 C8.8581722,21.5 8.5,21.1418278 8.5,20.7 L8.5,9.3 C8.5,8.8581722 8.8581722,8.5 9.3,8.5 L20.699,8.5 L20.7,8.5 C21.1418278,8.5 21.5,8.8581722 21.5,9.3 L21.499,9.314 L21.4998782,20.6858958 C21.4999593,20.6905874 21.5,20.695289 21.5,20.7 C21.5,21.1418278 21.1418278,21.5 20.7,21.5 L20.7,21.5 L9.3,21.5 Z M19.899,19.9 L19.899,10.1 L10.1,10.1 L10.1,19.9 L19.899,19.9 Z" id="形状结合" fill="#7E808F" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/menuBar/__icon/--fullscreeninactive.svg b/src/renderer/assets/icon/menuBar/__icon/--fullscreeninactive.svg
new file mode 100644
index 0000000000..9bf50b8990
--- /dev/null
+++ b/src/renderer/assets/icon/menuBar/__icon/--fullscreeninactive.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--fullscreeninactive</title>
+    <desc>Created with Sketch.</desc>
+    <g id="menuBar/__icon/--fullscreen" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M9.3,21.5 C8.8581722,21.5 8.5,21.1418278 8.5,20.7 L8.5,9.3 C8.5,8.8581722 8.8581722,8.5 9.3,8.5 L20.699,8.5 L20.7,8.5 C21.1418278,8.5 21.5,8.8581722 21.5,9.3 L21.499,9.314 L21.4998782,20.6858958 C21.4999593,20.6905874 21.5,20.695289 21.5,20.7 C21.5,21.1418278 21.1418278,21.5 20.7,21.5 L20.7,21.5 L9.3,21.5 Z M19.899,19.9 L19.899,10.1 L10.1,10.1 L10.1,19.9 L19.899,19.9 Z" id="形状结合" fill="#CFD0DA" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/menuBar/__icon/--minimize.svg b/src/renderer/assets/icon/menuBar/__icon/--minimize.svg
new file mode 100644
index 0000000000..4e11efd455
--- /dev/null
+++ b/src/renderer/assets/icon/menuBar/__icon/--minimize.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--minimize</title>
+    <desc>Created with Sketch.</desc>
+    <g id="menuBar/__icon/--minimize" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="矩形" fill="#7E808F" fill-rule="nonzero" x="8.00337968" y="14.2" width="13.9932406" height="1.6" rx="0.8"></rect>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/menuBar/__icon/--minimizeinactive.svg b/src/renderer/assets/icon/menuBar/__icon/--minimizeinactive.svg
new file mode 100644
index 0000000000..c86352f31e
--- /dev/null
+++ b/src/renderer/assets/icon/menuBar/__icon/--minimizeinactive.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--minimizeinactive</title>
+    <desc>Created with Sketch.</desc>
+    <g id="menuBar/__icon/--minimize" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="矩形" fill="#CFD0DA" fill-rule="nonzero" x="8.00337968" y="14.2" width="13.9932406" height="1.6" rx="0.8"></rect>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/menuBar/__icon/--refreshinactive.svg b/src/renderer/assets/icon/menuBar/__icon/--refreshinactive.svg
new file mode 100644
index 0000000000..6f51f4b3f9
--- /dev/null
+++ b/src/renderer/assets/icon/menuBar/__icon/--refreshinactive.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--refreshinactive</title>
+    <desc>Created with Sketch.</desc>
+    <g id="menuBar/__icon/--refresh" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M15.0256625,8 C16.4633426,8.00363212 17.8435807,8.43360079 19.0211861,9.25103347 L19.5200201,8.58179906 C19.6159588,8.44923725 19.818906,8.47501314 19.8816351,8.62598633 L19.8816351,8.62598633 L21.040279,11.4502893 C21.0993182,11.5938979 20.9886197,11.7485534 20.8336419,11.7375066 L20.8336419,11.7375066 L17.7340849,11.5202525 C17.5680372,11.5092057 17.4794784,11.3214098 17.579107,11.188848 L17.579107,11.188848 L18.137,10.438 L17.9760029,10.3300559 C17.0917263,9.77053379 16.0736079,9.47659128 15.0182826,9.47659128 L14.9555535,9.47659128 C13.5238533,9.49132036 12.1659522,10.0583903 11.1364565,11.0710152 C10.1069608,12.0836402 9.52025891,13.4276696 9.48335942,14.8563914 C9.44276999,16.3587585 10.0036422,17.7764335 11.0552776,18.8553393 C12.106913,19.9342451 13.5164734,20.527091 15.0182826,20.527091 C16.3946335,20.527091 17.7156352,20.0152551 18.737751,19.0910047 C19.7524869,18.1704366 20.3871581,16.9221462 20.5236862,15.5707522 C20.5605857,15.1951605 20.8779213,14.9116255 21.257986,14.9116255 C21.4683131,14.9116255 21.6675703,15 21.8077884,15.1546554 C21.9480064,15.3093109 22.0181154,15.5228827 21.9959758,15.7327722 C21.8188582,17.4450289 21.0107594,19.0247238 19.7266572,20.1883219 C18.4314852,21.3556023 16.7599384,22 15.0145927,22 C11.1475263,22 8,18.8590216 8,15 C8,13.1367701 8.73060986,11.3803261 10.0589914,10.0547081 C11.387373,8.72908995 13.1474786,8 15.0145927,8 L15.0256625,8 Z" id="icon--refresh" fill="#CFD0DA" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/menuBar/__icon/--sidebarinactive.svg b/src/renderer/assets/icon/menuBar/__icon/--sidebarinactive.svg
new file mode 100644
index 0000000000..f720d3dc07
--- /dev/null
+++ b/src/renderer/assets/icon/menuBar/__icon/--sidebarinactive.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--sidebarinactive</title>
+    <desc>Created with Sketch.</desc>
+    <g id="menuBar/__icon/--sidebar" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M21.1966203,19.15 C21.6384481,19.15 21.9966203,19.5081722 21.9966203,19.95 C21.9966203,20.3918278 21.6384481,20.75 21.1966203,20.75 L8.80337968,20.75 C8.36155188,20.75 8.00337968,20.3918278 8.00337968,19.95 C8.00337968,19.5081722 8.36155188,19.15 8.80337968,19.15 L21.1966203,19.15 Z M21.1966203,14.2 C21.6384481,14.2 21.9966203,14.5581722 21.9966203,15 C21.9966203,15.4418278 21.6384481,15.8 21.1966203,15.8 L8.80337968,15.8 C8.36155188,15.8 8.00337968,15.4418278 8.00337968,15 C8.00337968,14.5581722 8.36155188,14.2 8.80337968,14.2 L21.1966203,14.2 Z M21.1966203,9.25 C21.6384481,9.25 21.9966203,9.6081722 21.9966203,10.05 C21.9966203,10.4918278 21.6384481,10.85 21.1966203,10.85 L8.80337968,10.85 C8.36155188,10.85 8.00337968,10.4918278 8.00337968,10.05 C8.00337968,9.6081722 8.36155188,9.25 8.80337968,9.25 L21.1966203,9.25 Z" id="icon" fill="#CFD0DA" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/menuBar/__icon/--stopRefresh.svg b/src/renderer/assets/icon/menuBar/__icon/--stopRefresh.svg
new file mode 100644
index 0000000000..73b78d6a48
--- /dev/null
+++ b/src/renderer/assets/icon/menuBar/__icon/--stopRefresh.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--stopRefresh</title>
+    <desc>Created with Sketch.</desc>
+    <g id="menuBar/__icon/--stopRefresh" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10.1209632,8.98959236 L14.9992778,13.8682778 L19.8790368,8.98959236 C20.1630545,8.70557469 20.6074957,8.67975491 20.9206813,8.912133 L21.0104076,8.98959236 C21.3228271,9.30201179 21.3228271,9.80854378 21.0104076,10.1209632 L21.0104076,10.1209632 L16.1312778,14.9992778 L21.0104076,19.8790368 C21.3228271,20.1914562 21.3228271,20.6979882 21.0104076,21.0104076 C20.6979882,21.3228271 20.1914562,21.3228271 19.8790368,21.0104076 L14.9992778,16.1312778 L10.1209632,21.0104076 C9.83694554,21.2944253 9.39250428,21.3202451 9.07931869,21.087867 L8.98959236,21.0104076 C8.67717293,20.6979882 8.67717293,20.1914562 8.98959236,19.8790368 L8.98959236,19.8790368 L13.8682778,14.9992778 L8.98959236,10.1209632 C8.67717293,9.80854378 8.67717293,9.30201179 8.98959236,8.98959236 C9.30201179,8.67717293 9.80854378,8.67717293 10.1209632,8.98959236 Z" id="icon" fill="#7E808F" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/menuBar/__icon/--stopRefreshinactive.svg b/src/renderer/assets/icon/menuBar/__icon/--stopRefreshinactive.svg
new file mode 100644
index 0000000000..248bde194a
--- /dev/null
+++ b/src/renderer/assets/icon/menuBar/__icon/--stopRefreshinactive.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--stopRefreshinactive</title>
+    <desc>Created with Sketch.</desc>
+    <g id="menuBar/__icon/--stopRefresh" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10.1209632,8.98959236 L14.9992778,13.8682778 L19.8790368,8.98959236 C20.1630545,8.70557469 20.6074957,8.67975491 20.9206813,8.912133 L21.0104076,8.98959236 C21.3228271,9.30201179 21.3228271,9.80854378 21.0104076,10.1209632 L21.0104076,10.1209632 L16.1312778,14.9992778 L21.0104076,19.8790368 C21.3228271,20.1914562 21.3228271,20.6979882 21.0104076,21.0104076 C20.6979882,21.3228271 20.1914562,21.3228271 19.8790368,21.0104076 L14.9992778,16.1312778 L10.1209632,21.0104076 C9.83694554,21.2944253 9.39250428,21.3202451 9.07931869,21.087867 L8.98959236,21.0104076 C8.67717293,20.6979882 8.67717293,20.1914562 8.98959236,19.8790368 L8.98959236,19.8790368 L13.8682778,14.9992778 L8.98959236,10.1209632 C8.67717293,9.80854378 8.67717293,9.30201179 8.98959236,8.98959236 C9.30201179,8.67717293 9.80854378,8.67717293 10.1209632,8.98959236 Z" id="icon" fill="#CFD0DA" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/menuBar/__icon/--switchModeinactive.svg b/src/renderer/assets/icon/menuBar/__icon/--switchModeinactive.svg
new file mode 100644
index 0000000000..fb389e7bec
--- /dev/null
+++ b/src/renderer/assets/icon/menuBar/__icon/--switchModeinactive.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="30px" viewBox="0 0 12 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--switchModeinactive</title>
+    <desc>Created with Sketch.</desc>
+    <g id="menuBar/__icon/--switchMode" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M4.5,14 L6.03111462,15.5954996 C6.41351594,15.9939813 7.04654671,16.0070171 7.44502842,15.6246157 C7.4549326,15.6151112 7.46464003,15.6054038 7.47414454,15.5954996 L9.00525915,14 L9.00525915,14" id="路径" stroke="#CFD0DA" stroke-width="1.4" transform="translate(6.752630, 15.173678) rotate(-90.000000) translate(-6.752630, -15.173678) "></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/pageRefresh-active-icon.svg b/src/renderer/assets/icon/pageRefresh-active-icon.svg
deleted file mode 100644
index 0d82bc81e7..0000000000
--- a/src/renderer/assets/icon/pageRefresh-active-icon.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
-    <desc>Created with Sketch.</desc>
-    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.45">
-        <g id="browseing" transform="translate(-340.000000, -323.000000)" fill="#FFFFFF" fill-rule="nonzero">
-            <g id="control-bar" transform="translate(238.000000, 300.000000)">
-                <g id="icon-refresh" transform="translate(98.000000, 19.000000)">
-                    <path d="M19.9275636,23.9920296 C20.3650254,23.4227245 20.2581454,22.6065787 19.6888403,22.1691168 C19.1195352,21.7316549 18.3033893,21.838535 17.8659275,22.4078401 C16.98761,23.5508667 16.3399248,24.4093268 15.9201976,24.9870317 C15.70106,25.2886488 15.5406853,25.5182327 15.433665,25.684841 C15.3602796,25.7990867 15.3053307,25.8928755 15.2591332,25.9907264 C15.2027547,26.105821 15.2027547,26.105821 15.1306023,26.4247782 C15.0986066,26.7012347 15.0986066,26.7012347 15.3087888,27.266275 C15.8834144,27.8466713 15.8834144,27.8466713 16.4822263,27.8963696 C22.760792,27.6355905 27.8,22.2689278 27.8,15.9070924 C27.8,12.4110703 26.2702442,9.16081599 23.6658784,6.9325943 C21.5446155,5.11770182 18.8489726,4.10249962 16,4.10249962 C9.48291266,4.10249962 4.2,9.38772305 4.2,15.9070924 C4.2,18.5715924 5.08653001,21.1044742 6.69120849,23.1623351 C7.83714485,24.631899 9.3164956,25.8144882 11.0052919,26.6047987 C11.6555786,26.9091151 12.4294372,26.6286508 12.7337536,25.9783642 C13.03807,25.3280775 12.7576057,24.5542189 12.107319,24.2499025 C10.7908372,23.633825 9.63608734,22.7107209 8.74153335,21.563533 C7.49000766,19.9585599 6.8,17.9871571 6.8,15.9070924 C6.8,10.8234089 10.9191076,6.70249962 16,6.70249962 C18.2232077,6.70249962 20.320979,7.49253827 21.9756109,8.90819441 C24.0085468,10.6475168 25.2,13.1789836 25.2,15.9070924 C25.2,19.7782293 22.8118095,23.1835609 19.4592128,24.603186 C19.6070218,24.4097288 19.7631448,24.2060013 19.9275636,23.9920296 Z" id="refresh" transform="translate(16.000000, 15.999435) rotate(-126.000000) translate(-16.000000, -15.999435) "></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/src/renderer/assets/icon/pageRefresh-default-icon.svg b/src/renderer/assets/icon/pageRefresh-default-icon.svg
index 71ff9a77e5..d3f8d97ae7 100644
--- a/src/renderer/assets/icon/pageRefresh-default-icon.svg
+++ b/src/renderer/assets/icon/pageRefresh-default-icon.svg
@@ -1,14 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--refresh</title>
     <desc>Created with Sketch.</desc>
-    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="browseing" transform="translate(-340.000000, -323.000000)" fill="#6E7085" fill-rule="nonzero">
-            <g id="control-bar" transform="translate(238.000000, 300.000000)">
-                <g id="icon-refresh" transform="translate(98.000000, 19.000000)">
-                    <path d="M19.9275636,23.9920296 C20.3650254,23.4227245 20.2581454,22.6065787 19.6888403,22.1691168 C19.1195352,21.7316549 18.3033893,21.838535 17.8659275,22.4078401 C16.98761,23.5508667 16.3399248,24.4093268 15.9201976,24.9870317 C15.70106,25.2886488 15.5406853,25.5182327 15.433665,25.684841 C15.3602796,25.7990867 15.3053307,25.8928755 15.2591332,25.9907264 C15.2027547,26.105821 15.2027547,26.105821 15.1306023,26.4247782 C15.0986066,26.7012347 15.0986066,26.7012347 15.3087888,27.266275 C15.8834144,27.8466713 15.8834144,27.8466713 16.4822263,27.8963696 C22.760792,27.6355905 27.8,22.2689278 27.8,15.9070924 C27.8,12.4110703 26.2702442,9.16081599 23.6658784,6.9325943 C21.5446155,5.11770182 18.8489726,4.10249962 16,4.10249962 C9.48291266,4.10249962 4.2,9.38772305 4.2,15.9070924 C4.2,18.5715924 5.08653001,21.1044742 6.69120849,23.1623351 C7.83714485,24.631899 9.3164956,25.8144882 11.0052919,26.6047987 C11.6555786,26.9091151 12.4294372,26.6286508 12.7337536,25.9783642 C13.03807,25.3280775 12.7576057,24.5542189 12.107319,24.2499025 C10.7908372,23.633825 9.63608734,22.7107209 8.74153335,21.563533 C7.49000766,19.9585599 6.8,17.9871571 6.8,15.9070924 C6.8,10.8234089 10.9191076,6.70249962 16,6.70249962 C18.2232077,6.70249962 20.320979,7.49253827 21.9756109,8.90819441 C24.0085468,10.6475168 25.2,13.1789836 25.2,15.9070924 C25.2,19.7782293 22.8118095,23.1835609 19.4592128,24.603186 C19.6070218,24.4097288 19.7631448,24.2060013 19.9275636,23.9920296 Z" id="refresh" transform="translate(16.000000, 15.999435) rotate(-126.000000) translate(-16.000000, -15.999435) "></path>
-                </g>
-            </g>
-        </g>
+    <g id="menuBar/__icon/--refresh" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M15.0256625,8 C16.4633426,8.00363212 17.8435807,8.43360079 19.0211861,9.25103347 L19.5200201,8.58179906 C19.6159588,8.44923725 19.818906,8.47501314 19.8816351,8.62598633 L19.8816351,8.62598633 L21.040279,11.4502893 C21.0993182,11.5938979 20.9886197,11.7485534 20.8336419,11.7375066 L20.8336419,11.7375066 L17.7340849,11.5202525 C17.5680372,11.5092057 17.4794784,11.3214098 17.579107,11.188848 L17.579107,11.188848 L18.137,10.438 L17.9760029,10.3300559 C17.0917263,9.77053379 16.0736079,9.47659128 15.0182826,9.47659128 L14.9555535,9.47659128 C13.5238533,9.49132036 12.1659522,10.0583903 11.1364565,11.0710152 C10.1069608,12.0836402 9.52025891,13.4276696 9.48335942,14.8563914 C9.44276999,16.3587585 10.0036422,17.7764335 11.0552776,18.8553393 C12.106913,19.9342451 13.5164734,20.527091 15.0182826,20.527091 C16.3946335,20.527091 17.7156352,20.0152551 18.737751,19.0910047 C19.7524869,18.1704366 20.3871581,16.9221462 20.5236862,15.5707522 C20.5605857,15.1951605 20.8779213,14.9116255 21.257986,14.9116255 C21.4683131,14.9116255 21.6675703,15 21.8077884,15.1546554 C21.9480064,15.3093109 22.0181154,15.5228827 21.9959758,15.7327722 C21.8188582,17.4450289 21.0107594,19.0247238 19.7266572,20.1883219 C18.4314852,21.3556023 16.7599384,22 15.0145927,22 C11.1475263,22 8,18.8590216 8,15 C8,13.1367701 8.73060986,11.3803261 10.0589914,10.0547081 C11.387373,8.72908995 13.1474786,8 15.0145927,8 L15.0256625,8 Z" id="icon--refresh" fill="#7E808F" fill-rule="nonzero"></path>
     </g>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/pageRefresh-hover-icon.svg b/src/renderer/assets/icon/pageRefresh-hover-icon.svg
deleted file mode 100644
index ae72cf1721..0000000000
--- a/src/renderer/assets/icon/pageRefresh-hover-icon.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="各类图标的鼠标悬浮状态" transform="translate(-627.000000, -13.000000)" fill="#000" fill-rule="nonzero">
-            <g id="browserArea" transform="translate(76.000000, 0.000000)">
-                <g id="menuBar">
-                    <g id="urlBar" transform="translate(114.000000, 0.000000)">
-                        <g id="button" transform="translate(429.000000, 5.000000)">
-                            <g id="icon" transform="translate(8.000000, 8.000000)">
-                                <path d="M7.0256625,-3.55271368e-15 C8.46334264,0.00363212247 9.84358073,0.43360079 11.0211861,1.25103347 L11.5200201,0.581799064 C11.6159588,0.449237254 11.818906,0.475013145 11.8816351,0.625986327 L11.8816351,0.625986327 L13.040279,3.45028933 C13.0993182,3.59389795 12.9886197,3.74855338 12.8336419,3.73750657 L12.8336419,3.73750657 L9.7340849,3.5202525 C9.5680372,3.50920569 9.47947843,3.32140979 9.57910704,3.18884798 L9.57910704,3.18884798 L10.137,2.438 L9.97600289,2.33005594 C9.09172631,1.77053379 8.07360794,1.47659128 7.0182826,1.47659128 L6.95555347,1.47659128 C5.52385334,1.49132036 4.16595218,2.05839032 3.13645647,3.07101525 C2.10696075,4.08364017 1.52025891,5.42766964 1.48335942,6.85639137 C1.44276999,8.35875854 2.00364221,9.77643346 3.0552776,10.8553393 C4.10691302,11.9342451 5.51647345,12.527091 7.0182826,12.527091 C8.39463349,12.527091 9.71563517,12.0152551 10.737751,11.0910047 C11.7524869,10.1704366 12.3871581,8.92214623 12.5236862,7.57075224 C12.5605857,7.19516046 12.8779213,6.91162546 13.257986,6.91162546 C13.4683131,6.91162546 13.6675703,7 13.8077884,7.15465544 C13.9480064,7.30931089 14.0181154,7.52288269 13.9959758,7.73277221 C13.8188582,9.44502891 13.0107594,11.0247238 11.7266572,12.1883219 C10.4314852,13.3556023 8.75993842,14 7.01459266,14 C3.14752633,14 7.28306304e-14,10.8590216 7.28306304e-14,7 C7.28306304e-14,5.13677011 0.730609862,3.38032613 2.05899143,2.05470805 C3.38737299,0.729089954 5.14747857,-3.55271368e-15 7.01459266,-3.55271368e-15 L7.0256625,-3.55271368e-15 Z" id="icon--refresh"></path>
-                            </g>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/src/renderer/assets/icon/pip-active-icon.svg b/src/renderer/assets/icon/pip-active-icon.svg
deleted file mode 100644
index b103ba0423..0000000000
--- a/src/renderer/assets/icon/pip-active-icon.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="30px" height="23px" viewBox="0 0 30 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
-    <desc>Created with Sketch.</desc>
-    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.45">
-        <g id="icon-pictureInPicture" transform="translate(-1.000000, -5.000000)" fill="#FFFFFF" fill-rule="nonzero">
-            <path d="M3.43,5 L28.57,5 C29.9120519,5 31,6.08794806 31,7.43 L31,25.07 C31,26.4120519 29.9120519,27.5 28.57,27.5 L3.43,27.5 C2.08794806,27.5 1,26.4120519 1,25.07 L1,7.43 C1,6.08794806 2.08794806,5 3.43,5 Z M3.5,8.3 L3.5,24.2 C3.5,24.6418278 3.8581722,25 4.3,25 L27.7,25 C28.1418278,25 28.5,24.6418278 28.5,24.2 L28.5,8.3 C28.5,7.8581722 28.1418278,7.5 27.7,7.5 L4.3,7.5 C3.8581722,7.5 3.5,7.8581722 3.5,8.3 Z M14.6696026,14.5395022 L25.4438391,14.5395022 C25.8911898,14.5395022 26.2538391,14.9021515 26.2538391,15.3495022 L26.2538391,21.7295022 C26.2538391,22.1768528 25.8911898,22.5395022 25.4438391,22.5395022 L14.6696026,22.5395022 C14.222252,22.5395022 13.8596026,22.1768528 13.8596026,21.7295022 L13.8596026,15.3495022 C13.8596026,14.9021515 14.222252,14.5395022 14.6696026,14.5395022 Z" id="pictureInPicture"></path>
-        </g>
-    </g>
-</svg>
diff --git a/src/renderer/assets/icon/pip-default-icon.svg b/src/renderer/assets/icon/pip-default-icon.svg
index efa7d53fec..3d8e516f39 100644
--- a/src/renderer/assets/icon/pip-default-icon.svg
+++ b/src/renderer/assets/icon/pip-default-icon.svg
@@ -1,7 +1,9 @@
-<svg width="18px" height="14px" viewBox="0 0 18 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="menuBar/__icon/--pictureInPicture" transform="translate(-6.000000, -8.000000)" fill="#B8BACC" fill-rule="nonzero">
-            <path d="M22.542,8.25 C23.3472312,8.25 24,8.90276883 24,9.708 L24,20.292 C24,21.0972312 23.3472312,21.75 22.542,21.75 L7.458,21.75 C6.65276883,21.75 6,21.0972312 6,20.292 L6,9.708 C6,8.90276883 6.65276883,8.25 7.458,8.25 L22.542,8.25 Z M22.02,9.75 L7.98,9.75 C7.71490332,9.75 7.5,9.96490332 7.5,10.23 L7.5,19.77 C7.5,20.0350967 7.71490332,20.25 7.98,20.25 L22.02,20.25 C22.2850967,20.25 22.5,20.0350967 22.5,19.77 L22.5,10.23 C22.5,9.96490332 22.2850967,9.75 22.02,9.75 Z M19.6663035,13.4737013 C19.9347139,13.4737013 20.1523035,13.6912909 20.1523035,13.9597013 L20.1523035,17.7877013 C20.1523035,18.0561117 19.9347139,18.2737013 19.6663035,18.2737013 L13.2017616,18.2737013 C12.9333512,18.2737013 12.7157616,18.0561117 12.7157616,17.7877013 L12.7157616,13.9597013 C12.7157616,13.6912909 12.9333512,13.4737013 13.2017616,13.4737013 L19.6663035,13.4737013 Z" id="icon-pictureInPicture"></path>
-        </g>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--pictureInPicture</title>
+    <desc>Created with Sketch.</desc>
+    <g id="menuBar/__icon/--pictureInPicture" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M22.542,8.25 C23.3472312,8.25 24,8.90276883 24,9.708 L24,20.292 C24,21.0972312 23.3472312,21.75 22.542,21.75 L7.458,21.75 C6.65276883,21.75 6,21.0972312 6,20.292 L6,9.708 C6,8.90276883 6.65276883,8.25 7.458,8.25 L22.542,8.25 Z M22.02,9.75 L7.98,9.75 C7.71490332,9.75 7.5,9.96490332 7.5,10.23 L7.5,19.77 C7.5,20.0350967 7.71490332,20.25 7.98,20.25 L22.02,20.25 C22.2850967,20.25 22.5,20.0350967 22.5,19.77 L22.5,10.23 C22.5,9.96490332 22.2850967,9.75 22.02,9.75 Z M19.6663035,13.4737013 C19.9347139,13.4737013 20.1523035,13.6912909 20.1523035,13.9597013 L20.1523035,17.7877013 C20.1523035,18.0561117 19.9347139,18.2737013 19.6663035,18.2737013 L13.2017616,18.2737013 C12.9333512,18.2737013 12.7157616,18.0561117 12.7157616,17.7877013 L12.7157616,13.9597013 C12.7157616,13.6912909 12.9333512,13.4737013 13.2017616,13.4737013 L19.6663035,13.4737013 Z" id="icon-pictureInPicture" fill="#7E808F" fill-rule="nonzero"></path>
     </g>
 </svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/pip-hover-icon.svg b/src/renderer/assets/icon/pip-hover-icon.svg
deleted file mode 100644
index 0b31a4098b..0000000000
--- a/src/renderer/assets/icon/pip-hover-icon.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="30px" height="23px" viewBox="0 0 30 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
-    <desc>Created with Sketch.</desc>
-    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="1">
-        <g id="icon-pictureInPicture" transform="translate(-1.000000, -5.000000)" fill="#FFFFFF" fill-rule="nonzero">
-            <path d="M3.43,5 L28.57,5 C29.9120519,5 31,6.08794806 31,7.43 L31,25.07 C31,26.4120519 29.9120519,27.5 28.57,27.5 L3.43,27.5 C2.08794806,27.5 1,26.4120519 1,25.07 L1,7.43 C1,6.08794806 2.08794806,5 3.43,5 Z M3.5,8.3 L3.5,24.2 C3.5,24.6418278 3.8581722,25 4.3,25 L27.7,25 C28.1418278,25 28.5,24.6418278 28.5,24.2 L28.5,8.3 C28.5,7.8581722 28.1418278,7.5 27.7,7.5 L4.3,7.5 C3.8581722,7.5 3.5,7.8581722 3.5,8.3 Z M14.6696026,14.5395022 L25.4438391,14.5395022 C25.8911898,14.5395022 26.2538391,14.9021515 26.2538391,15.3495022 L26.2538391,21.7295022 C26.2538391,22.1768528 25.8911898,22.5395022 25.4438391,22.5395022 L14.6696026,22.5395022 C14.222252,22.5395022 13.8596026,22.1768528 13.8596026,21.7295022 L13.8596026,15.3495022 C13.8596026,14.9021515 14.222252,14.5395022 14.6696026,14.5395022 Z" id="pictureInPicture"></path>
-        </g>
-    </g>
-</svg>
diff --git a/src/renderer/assets/icon/pipDisabled-default-icon.svg b/src/renderer/assets/icon/pipDisabled-default-icon.svg
index 8c63e12b2d..763392c464 100644
--- a/src/renderer/assets/icon/pipDisabled-default-icon.svg
+++ b/src/renderer/assets/icon/pipDisabled-default-icon.svg
@@ -1,14 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="30px" height="23px" viewBox="0 0 30 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--pictureInPictureinactive</title>
     <desc>Created with Sketch.</desc>
-    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
-        <g id="browseing" transform="translate(-431.000000, -324.000000)" fill="#6E7085">
-            <g id="control-bar" transform="translate(238.000000, 300.000000)">
-                <g id="icon-pictureInPicture" transform="translate(192.000000, 19.000000)">
-                    <path d="M3.43,5 L28.57,5 C29.9120519,5 31,6.08794806 31,7.43 L31,25.07 C31,26.4120519 29.9120519,27.5 28.57,27.5 L3.43,27.5 C2.08794806,27.5 1,26.4120519 1,25.07 L1,7.43 C1,6.08794806 2.08794806,5 3.43,5 Z M3.5,8.3 L3.5,24.2 C3.5,24.6418278 3.8581722,25 4.3,25 L27.7,25 C28.1418278,25 28.5,24.6418278 28.5,24.2 L28.5,8.3 C28.5,7.8581722 28.1418278,7.5 27.7,7.5 L4.3,7.5 C3.8581722,7.5 3.5,7.8581722 3.5,8.3 Z M14.6696026,14.5395022 L25.4438391,14.5395022 C25.8911898,14.5395022 26.2538391,14.9021515 26.2538391,15.3495022 L26.2538391,21.7295022 C26.2538391,22.1768528 25.8911898,22.5395022 25.4438391,22.5395022 L14.6696026,22.5395022 C14.222252,22.5395022 13.8596026,22.1768528 13.8596026,21.7295022 L13.8596026,15.3495022 C13.8596026,14.9021515 14.222252,14.5395022 14.6696026,14.5395022 Z" id="pictureInPicture"></path>
-                </g>
-            </g>
-        </g>
+    <g id="menuBar/__icon/--pictureInPicture" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M22.542,8.25 C23.3472312,8.25 24,8.90276883 24,9.708 L24,20.292 C24,21.0972312 23.3472312,21.75 22.542,21.75 L7.458,21.75 C6.65276883,21.75 6,21.0972312 6,20.292 L6,9.708 C6,8.90276883 6.65276883,8.25 7.458,8.25 L22.542,8.25 Z M22.02,9.75 L7.98,9.75 C7.71490332,9.75 7.5,9.96490332 7.5,10.23 L7.5,19.77 C7.5,20.0350967 7.71490332,20.25 7.98,20.25 L22.02,20.25 C22.2850967,20.25 22.5,20.0350967 22.5,19.77 L22.5,10.23 C22.5,9.96490332 22.2850967,9.75 22.02,9.75 Z M19.6663035,13.4737013 C19.9347139,13.4737013 20.1523035,13.6912909 20.1523035,13.9597013 L20.1523035,17.7877013 C20.1523035,18.0561117 19.9347139,18.2737013 19.6663035,18.2737013 L13.2017616,18.2737013 C12.9333512,18.2737013 12.7157616,18.0561117 12.7157616,17.7877013 L12.7157616,13.9597013 C12.7157616,13.6912909 12.9333512,13.4737013 13.2017616,13.4737013 L19.6663035,13.4737013 Z" id="icon-pictureInPicture" fill="#CFD0DA" fill-rule="nonzero"></path>
     </g>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/pop-default-icon.svg b/src/renderer/assets/icon/pop-default-icon.svg
index 4d69c26bd5..478c1f8562 100644
--- a/src/renderer/assets/icon/pop-default-icon.svg
+++ b/src/renderer/assets/icon/pop-default-icon.svg
@@ -1,8 +1,9 @@
-
-<svg width="19px" height="15px" viewBox="0 0 19 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="menuBar/__icon/--pictureOutPicture" transform="translate(-6.000000, -8.000000)" fill="#6E7085" fill-rule="nonzero">
-            <path d="M21.542,8.75 C22.3472312,8.75 23,9.40276883 23,10.208 L23,15.5 L24.389,15.5 C24.6574104,15.5 24.875,15.7175896 24.875,15.986 L24.875,21.764 C24.875,22.0324104 24.6574104,22.25 24.389,22.25 L15.111,22.25 C14.8425896,22.25 14.625,22.0324104 14.625,21.764 L14.625,20.75 L7.458,20.75 C6.65276883,20.75 6,20.0972312 6,19.292 L6,10.208 C6,9.40276883 6.65276883,8.75 7.458,8.75 L21.542,8.75 Z M21.02,10.25 L7.98,10.25 C7.71490332,10.25 7.5,10.4649033 7.5,10.73 L7.5,18.77 C7.5,19.0350967 7.71490332,19.25 7.98,19.25 L14.625,19.25 L14.625,15.986 C14.625,15.7175896 14.8425896,15.5 15.111,15.5 L21.5,15.5 L21.5,10.73 C21.5,10.4649033 21.2850967,10.25 21.02,10.25 Z" id="icon--pictureOutPicture"></path>
-        </g>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--pictureOutPicture</title>
+    <desc>Created with Sketch.</desc>
+    <g id="menuBar/__icon/--pictureOutPicture" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M21.542,8.75 C22.3472312,8.75 23,9.40276883 23,10.208 L23,15.5 L24.389,15.5 C24.6574104,15.5 24.875,15.7175896 24.875,15.986 L24.875,21.764 C24.875,22.0324104 24.6574104,22.25 24.389,22.25 L15.111,22.25 C14.8425896,22.25 14.625,22.0324104 14.625,21.764 L14.625,20.75 L7.458,20.75 C6.65276883,20.75 6,20.0972312 6,19.292 L6,10.208 C6,9.40276883 6.65276883,8.75 7.458,8.75 L21.542,8.75 Z M21.02,10.25 L7.98,10.25 C7.71490332,10.25 7.5,10.4649033 7.5,10.73 L7.5,18.77 C7.5,19.0350967 7.71490332,19.25 7.98,19.25 L14.625,19.25 L14.625,15.986 C14.625,15.7175896 14.8425896,15.5 15.111,15.5 L21.5,15.5 L21.5,10.73 C21.5,10.4649033 21.2850967,10.25 21.02,10.25 Z" id="icon--pictureOutPicture" fill="#7E808F" fill-rule="nonzero"></path>
     </g>
 </svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/popDisabled-default-icon.svg b/src/renderer/assets/icon/popDisabled-default-icon.svg
new file mode 100644
index 0000000000..9d46f70d14
--- /dev/null
+++ b/src/renderer/assets/icon/popDisabled-default-icon.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--pictureOutPictureinactive</title>
+    <desc>Created with Sketch.</desc>
+    <g id="menuBar/__icon/--pictureOutPicture" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M21.542,8.75 C22.3472312,8.75 23,9.40276883 23,10.208 L23,15.5 L24.389,15.5 C24.6574104,15.5 24.875,15.7175896 24.875,15.986 L24.875,21.764 C24.875,22.0324104 24.6574104,22.25 24.389,22.25 L15.111,22.25 C14.8425896,22.25 14.625,22.0324104 14.625,21.764 L14.625,20.75 L7.458,20.75 C6.65276883,20.75 6,20.0972312 6,19.292 L6,10.208 C6,9.40276883 6.65276883,8.75 7.458,8.75 L21.542,8.75 Z M21.02,10.25 L7.98,10.25 C7.71490332,10.25 7.5,10.4649033 7.5,10.73 L7.5,18.77 C7.5,19.0350967 7.71490332,19.25 7.98,19.25 L14.625,19.25 L14.625,15.986 C14.625,15.7175896 14.8425896,15.5 15.111,15.5 L21.5,15.5 L21.5,10.73 C21.5,10.4649033 21.2850967,10.25 21.02,10.25 Z" id="icon--pictureOutPicture" fill="#CFD0DA" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/sidebar-default-icon.svg b/src/renderer/assets/icon/sidebar-default-icon.svg
index df6b4868d9..239e893cb2 100644
--- a/src/renderer/assets/icon/sidebar-default-icon.svg
+++ b/src/renderer/assets/icon/sidebar-default-icon.svg
@@ -1,9 +1,9 @@
-<svg width="14px" height="12px" viewBox="0 0 14 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="收起侧边栏" transform="translate(-261.000000, -290.000000)" fill="#6E7085" fill-rule="nonzero">
-            <g id="sidebar-default-icon" transform="translate(261.000000, 290.000000)">
-                <path d="M13.1966203,10.15 C13.6384481,10.15 13.9966203,10.5081722 13.9966203,10.95 C13.9966203,11.3918278 13.6384481,11.75 13.1966203,11.75 L0.803379678,11.75 C0.361551878,11.75 0.00337967812,11.3918278 0.00337967812,10.95 C0.00337967812,10.5081722 0.361551878,10.15 0.803379678,10.15 L13.1966203,10.15 Z M13.1966203,5.2 C13.6384481,5.2 13.9966203,5.5581722 13.9966203,6 C13.9966203,6.4418278 13.6384481,6.8 13.1966203,6.8 L0.803379678,6.8 C0.361551878,6.8 0.00337967812,6.4418278 0.00337967812,6 C0.00337967812,5.5581722 0.361551878,5.2 0.803379678,5.2 L13.1966203,5.2 Z M13.1966203,0.25 C13.6384481,0.25 13.9966203,0.6081722 13.9966203,1.05 C13.9966203,1.4918278 13.6384481,1.85 13.1966203,1.85 L0.803379678,1.85 C0.361551878,1.85 0.00337967812,1.4918278 0.00337967812,1.05 C0.00337967812,0.6081722 0.361551878,0.25 0.803379678,0.25 L13.1966203,0.25 Z" id="形状"></path>
-            </g>
-        </g>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--sidebar</title>
+    <desc>Created with Sketch.</desc>
+    <g id="menuBar/__icon/--sidebar" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M21.1966203,19.15 C21.6384481,19.15 21.9966203,19.5081722 21.9966203,19.95 C21.9966203,20.3918278 21.6384481,20.75 21.1966203,20.75 L8.80337968,20.75 C8.36155188,20.75 8.00337968,20.3918278 8.00337968,19.95 C8.00337968,19.5081722 8.36155188,19.15 8.80337968,19.15 L21.1966203,19.15 Z M21.1966203,14.2 C21.6384481,14.2 21.9966203,14.5581722 21.9966203,15 C21.9966203,15.4418278 21.6384481,15.8 21.1966203,15.8 L8.80337968,15.8 C8.36155188,15.8 8.00337968,15.4418278 8.00337968,15 C8.00337968,14.5581722 8.36155188,14.2 8.80337968,14.2 L21.1966203,14.2 Z M21.1966203,9.25 C21.6384481,9.25 21.9966203,9.6081722 21.9966203,10.05 C21.9966203,10.4918278 21.6384481,10.85 21.1966203,10.85 L8.80337968,10.85 C8.36155188,10.85 8.00337968,10.4918278 8.00337968,10.05 C8.00337968,9.6081722 8.36155188,9.25 8.80337968,9.25 L21.1966203,9.25 Z" id="icon" fill="#7E808F" fill-rule="nonzero"></path>
     </g>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/switchMode-default-icon.svg b/src/renderer/assets/icon/switchMode-default-icon.svg
new file mode 100644
index 0000000000..32ec433069
--- /dev/null
+++ b/src/renderer/assets/icon/switchMode-default-icon.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="30px" viewBox="0 0 12 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--switchMode</title>
+    <desc>Created with Sketch.</desc>
+    <g id="menuBar/__icon/--switchMode" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M4.5,14 L6.03111462,15.5954996 C6.41351594,15.9939813 7.04654671,16.0070171 7.44502842,15.6246157 C7.4549326,15.6151112 7.46464003,15.6054038 7.47414454,15.5954996 L9.00525915,14 L9.00525915,14" id="路径" stroke="#7E808F" stroke-width="1.4" transform="translate(6.752630, 15.173678) rotate(-90.000000) translate(-6.752630, -15.173678) "></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/components/BaseIconContainer.vue b/src/renderer/components/BaseIconContainer.vue
index 31c5897585..cbd76bc981 100644
--- a/src/renderer/components/BaseIconContainer.vue
+++ b/src/renderer/components/BaseIconContainer.vue
@@ -65,10 +65,6 @@ export default {
   height: 36px;
   margin: auto;
 }
-.sidebar {
-  width: 16px;
-  height: 16px;
-}
 .hoverState {
   display: flex;
   width: 12px;
@@ -548,24 +544,6 @@ screen and (min-aspect-ratio: 1/1) and (min-height: 1080px) {
   height: 16px;
   display: block;
 }
-.backDisabled, .forwardDisabled {
-  display: block;
-  width: 16px;
-  height: 16px;
-}
-.back, .forward, .pageRefresh, .reloadStop {
-  width: 16px;
-  height: 16px;
- .default {
-    display: block;
-  }
-  .hover {
-    display: none;
-  }
-  .active {
-    display: none;
-  } 
-}
 .down {
   width: 5px;
   height: 7px;
@@ -639,10 +617,6 @@ screen and (min-aspect-ratio: 1/1) and (min-height: 1080px) {
   width: 20px;
   height: 20px;
 }
-.pip, .pop, .pipDisabled {
-  width: 20px;
-  height: 20px;
-}
 .pipRecord, .pipBack {
   width: 20px;
   height: 20px;
diff --git a/src/renderer/components/BrowsingView/BrowsingInput.vue b/src/renderer/components/BrowsingView/BrowsingInput.vue
index 4b6d1429f0..6e8abf88af 100644
--- a/src/renderer/components/BrowsingView/BrowsingInput.vue
+++ b/src/renderer/components/BrowsingView/BrowsingInput.vue
@@ -97,7 +97,7 @@ export default {
     z-index: 6;
 
     font-size: 12px;
-    color: rgba(15, 26, 59, 0.5);
+    color: #7E808E;
     letter-spacing: 0.09px;
     text-align: center;
     overflow: hidden;
diff --git a/src/renderer/components/BrowsingView/BrowsingPipControl.vue b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
index a631a53878..ad2ff629e8 100644
--- a/src/renderer/components/BrowsingView/BrowsingPipControl.vue
+++ b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
@@ -4,14 +4,11 @@
   >
     <div
       @mouseup="handleEnterPip(pip === 'Enter')"
-      :style="{
-        opacity: hasVideo ? 1.0 : 0.3,
-      }"
       :class="hasVideo ? 'button-hover' : ''"
       class="pip-icon no-drag"
     >
       <Icon
-        :type="pipType"
+        :type="pipMode"
       />
     </div>
     <div
@@ -24,7 +21,7 @@
       class="down-icon"
     >
       <Icon
-        type="down"
+        type="switchMode"
         class="icon"
       />
     </div>
@@ -54,9 +51,14 @@ export default {
     };
   },
   computed: {
+    pipMode() {
+      return this.pip === 'Enter' ? this.pipType : this.popType;
+    },
     pipType() {
-      if (!this.hasVideo) return 'pipDisabled';
-      return this.pip === 'Enter' ? 'pipDisabled' : 'pop';
+      return this.hasVideo ? 'pip' : 'pipDisabled';
+    },
+    popType() {
+      return this.hasVideo ? 'pop' : 'popDisabled';
     },
   },
   methods: {
@@ -69,7 +71,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .pip-control {
-  min-width: 65px;
+  min-width: 62px;
   z-index: 6;
   display: flex;
   width: 62px;
@@ -78,9 +80,9 @@ export default {
   align-items: center;
   border-left: 1px solid #F2F1F4;
   .pip-icon {
-    width: 30px;
+    width: 34px;
     height: 30px;
-    margin-left: 15px;
+    margin-left: 8px;
     border-radius: 15px;
     display: flex;
     justify-content: center;
@@ -91,9 +93,8 @@ export default {
     background-color: #ECEEF0;
   }
   .down-icon {
-    width: 8px;
-    height: 20px;
-    margin-left: 2px;
+    width: 12px;
+    height: 30px;
     margin-right: 3px;
     display: flex;
     justify-content: flex-start;

From 818da89823697d58d104be104dbb05304909eec9 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 16:56:53 +0800
Subject: [PATCH 097/123] fix(browsing): pip icon adjust

---
 src/renderer/components/BaseIconContainer.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/renderer/components/BaseIconContainer.vue b/src/renderer/components/BaseIconContainer.vue
index cbd76bc981..e6bcbd5d34 100644
--- a/src/renderer/components/BaseIconContainer.vue
+++ b/src/renderer/components/BaseIconContainer.vue
@@ -617,6 +617,10 @@ screen and (min-aspect-ratio: 1/1) and (min-height: 1080px) {
   width: 20px;
   height: 20px;
 }
+.pip {
+  width: 30px;
+  height: 30px;
+}
 .pipRecord, .pipBack {
   width: 20px;
   height: 20px;

From 3e0dc690949d155c1684d5a1fa7795437c484037 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 17:08:18 +0800
Subject: [PATCH 098/123] fix(browsing): pop icon

---
 src/renderer/components/BaseIconContainer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/BaseIconContainer.vue b/src/renderer/components/BaseIconContainer.vue
index e6bcbd5d34..86a904ef43 100644
--- a/src/renderer/components/BaseIconContainer.vue
+++ b/src/renderer/components/BaseIconContainer.vue
@@ -617,7 +617,7 @@ screen and (min-aspect-ratio: 1/1) and (min-height: 1080px) {
   width: 20px;
   height: 20px;
 }
-.pip {
+.pip, .pop {
   width: 30px;
   height: 30px;
 }

From 59cacfdd664d69970cb92c4e55e9be8d6b673452 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 17:31:33 +0800
Subject: [PATCH 099/123] fix(sidebar): sidebar icon adjustment

---
 src/renderer/components/BaseIconContainer.vue |  2 +-
 .../LandingView/BilibiliSidebarIcon.vue       | 20 +++++++++----------
 .../LandingView/YoutubeSidebarIcon.vue        |  8 ++++----
 .../LandingView/iQiyiSidebarIcon.vue          | 14 ++++++-------
 src/renderer/components/Sidebar.vue           |  7 +++----
 5 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/src/renderer/components/BaseIconContainer.vue b/src/renderer/components/BaseIconContainer.vue
index 86a904ef43..3fd82f57db 100644
--- a/src/renderer/components/BaseIconContainer.vue
+++ b/src/renderer/components/BaseIconContainer.vue
@@ -617,7 +617,7 @@ screen and (min-aspect-ratio: 1/1) and (min-height: 1080px) {
   width: 20px;
   height: 20px;
 }
-.pip, .pop {
+.pip, .pop, .pipDisabled, .popDisabled {
   width: 30px;
   height: 30px;
 }
diff --git a/src/renderer/components/LandingView/BilibiliSidebarIcon.vue b/src/renderer/components/LandingView/BilibiliSidebarIcon.vue
index c0b37d95a0..336877dcee 100644
--- a/src/renderer/components/LandingView/BilibiliSidebarIcon.vue
+++ b/src/renderer/components/LandingView/BilibiliSidebarIcon.vue
@@ -9,9 +9,9 @@
     class="sidebar"
   >
     <svg
-      width="42px"
-      height="42px"
-      viewBox="0 0 42 42"
+      width="44x"
+      height="44px"
+      viewBox="0 0 44 44"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -19,9 +19,9 @@
       <defs>
         <circle
           id="path-1"
-          cx="20"
-          cy="20"
-          r="20"
+          cx="22"
+          cy="22"
+          r="22"
         />
       </defs>
       <g
@@ -52,9 +52,9 @@
                 :stroke-width="selected ? 2 : 0"
                 stroke="#EBECF0"
                 fill="#20B0E3"
-                cx="20"
-                cy="20"
-                r="20"
+                cx="21"
+                cy="21"
+                r="21"
               />
               <g
                 id="logo--bilibili"
@@ -65,7 +65,7 @@
               >
                 <g
                   id="形状"
-                  transform="translate(10.000000, 10.000000)"
+                  transform="translate(11.000000, 11.000000)"
                   fill-rule="nonzero"
                 >
                   <path :d="d1" />
diff --git a/src/renderer/components/LandingView/YoutubeSidebarIcon.vue b/src/renderer/components/LandingView/YoutubeSidebarIcon.vue
index 76ec541411..847e5a55f9 100644
--- a/src/renderer/components/LandingView/YoutubeSidebarIcon.vue
+++ b/src/renderer/components/LandingView/YoutubeSidebarIcon.vue
@@ -8,9 +8,9 @@
     }"
   >
     <svg
-      width="42px"
-      height="42px"
-      viewBox="0 0 42 42"
+      width="44px"
+      height="44px"
+      viewBox="0 0 44 44"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -55,7 +55,7 @@
                 fill="#FF0000"
                 cx="20"
                 cy="20"
-                r="20"
+                r="21"
               />
               <g
                 id="logo--youtube"
diff --git a/src/renderer/components/LandingView/iQiyiSidebarIcon.vue b/src/renderer/components/LandingView/iQiyiSidebarIcon.vue
index efb323f0df..e59010c7ec 100644
--- a/src/renderer/components/LandingView/iQiyiSidebarIcon.vue
+++ b/src/renderer/components/LandingView/iQiyiSidebarIcon.vue
@@ -8,9 +8,9 @@
     }"
   >
     <svg
-      width="42px"
-      height="42px"
-      viewBox="0 0 42 42"
+      width="44px"
+      height="44px"
+      viewBox="0 0 44 44"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -53,9 +53,9 @@
                 :stroke-width="selected ? 2 : 0"
                 stroke="#EBECF0"
                 fill="#42BD56"
-                cx="20"
-                cy="20"
-                r="20"
+                cx="21"
+                cy="21"
+                r="21"
               />
               <g
                 id="logo--iqiyi"
@@ -66,7 +66,7 @@
               >
                 <g
                   id="形状"
-                  transform="translate(8.177778, 9.777778)"
+                  transform="translate(9, 11)"
                   fill-rule="nonzero"
                 >
                   <path :d="d1" />
diff --git a/src/renderer/components/Sidebar.vue b/src/renderer/components/Sidebar.vue
index 616ba13571..1a5d454622 100644
--- a/src/renderer/components/Sidebar.vue
+++ b/src/renderer/components/Sidebar.vue
@@ -77,17 +77,16 @@ export default {
   will-change: width;
 
   .icon-box {
-    width: 40px;
+    width: 44px;
     margin-top: 46px;
     margin-left: 18px;
     margin-right: 18px;
     display: flex;
     flex-direction: column;
     div {
-      width: 40px;
-      height: 40px;
+      width: 44px;
+      height: 44px;
       margin-bottom: 16px;
-      cursor: pointer;
     }
   }
 }

From 24e0b6e70708a3ca283dc3c0dd50bb410d4ae570 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 17:40:34 +0800
Subject: [PATCH 100/123] feat(browsing): youtube sidebar icon

---
 src/renderer/components/LandingView/YoutubeSidebarIcon.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/LandingView/YoutubeSidebarIcon.vue b/src/renderer/components/LandingView/YoutubeSidebarIcon.vue
index 847e5a55f9..9b3b34d664 100644
--- a/src/renderer/components/LandingView/YoutubeSidebarIcon.vue
+++ b/src/renderer/components/LandingView/YoutubeSidebarIcon.vue
@@ -53,8 +53,8 @@
                 :stroke-width="selected ? 2 : 0"
                 stroke="#EBECF0"
                 fill="#FF0000"
-                cx="20"
-                cy="20"
+                cx="21"
+                cy="21"
                 r="21"
               />
               <g
@@ -65,7 +65,7 @@
               >
                 <g
                   id="路径"
-                  transform="translate(-2.376364, 4.000000)"
+                  transform="translate(-1.376364, 5.000000)"
                   fill-rule="nonzero"
                 >
                   <polygon

From 8808a87c288333f047a9e47ba1285d4aa2dc04f4 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Fri, 6 Sep 2019 17:56:05 +0800
Subject: [PATCH 101/123] fix(browsingview): fix browsingview control buttons
 state

---
 src/main/helpers/BrowserViewManager.ts        | 10 +--
 src/main/index.js                             | 17 +++-
 src/renderer/components/BaseIconContainer.vue |  2 +-
 src/renderer/components/BrowsingPip.vue       |  3 +
 src/renderer/components/BrowsingView.vue      | 78 ++++++++-----------
 .../BrowsingView/BrowsingHeader.vue           | 49 ++----------
 src/renderer/main.ts                          |  7 +-
 7 files changed, 66 insertions(+), 100 deletions(-)

diff --git a/src/main/helpers/BrowserViewManager.ts b/src/main/helpers/BrowserViewManager.ts
index 8093b8bae3..1f6c45d270 100644
--- a/src/main/helpers/BrowserViewManager.ts
+++ b/src/main/helpers/BrowserViewManager.ts
@@ -150,6 +150,11 @@ export class BrowserViewManager implements IBrowserViewManager {
     const currentIndex = this.history[this.currentChannel].currentIndex;
     const list = this.history[this.currentChannel].list;
     const pipBrowser = list[currentIndex].view;
+    const mainBrowser = {
+      canBack: currentIndex - 1 > 0,
+      canForward: false,
+      page: list[currentIndex - 1],
+    };
     this.currentPip = {
       pipIndex: currentIndex,
       pipChannel: this.currentChannel,
@@ -158,11 +163,6 @@ export class BrowserViewManager implements IBrowserViewManager {
     this.history[this.currentChannel].list.splice(currentIndex, 1);
     this.history[this.currentChannel].lastUpdateTime = Date.now();
     this.history[this.currentChannel].currentIndex = currentIndex - 1;
-    const mainBrowser = {
-      canBack: currentIndex - 1 > 0,
-      canForward: false,
-      page: list[currentIndex - 1],
-    };
     return { pipBrowser, mainBrowser };
   }
 
diff --git a/src/main/index.js b/src/main/index.js
index fd92974abc..10fb9f8676 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -841,6 +841,21 @@ function registerMainWindowEvent(mainWindow) {
     menuService.updateFocusedWindow(true, mainWindow && mainWindow.isVisible());
     mainWindow.focus();
   });
+  ipcMain.on('set-window-maximize', () => {
+    if (mainWindow && mainWindow.isFocused()) {
+      if (!mainWindow.isMaximized()) {
+        mainWindow.maximize();
+      } else {
+        mainWindow.unmaximize();
+      }
+    } else if (browsingWindow && browsingWindow.isFocused()) {
+      if (!browsingWindow.isMaximized()) {
+        browsingWindow.maximize();
+      } else {
+        browsingWindow.unmaximize();
+      }
+    }
+  });
   ipcMain.on('update-route-name', (e, route) => {
     routeName = route;
   });
@@ -1236,7 +1251,7 @@ app.on('menu-open-dialog', (playlistId) => {
 app.on('activate', () => {
   if (!mainWindow) {
     if (app.isReady()) createMainWindow();
-  } else if (!mainWindow.isVisible()) {
+  } else if (!mainWindow.isVisible() && (!browsingWindow || !browsingWindow.isVisible())) {
     mainWindow.show();
   }
   if (browsingWindow && browsingWindow.isMinimized()) {
diff --git a/src/renderer/components/BaseIconContainer.vue b/src/renderer/components/BaseIconContainer.vue
index 31c5897585..c4a704ee93 100644
--- a/src/renderer/components/BaseIconContainer.vue
+++ b/src/renderer/components/BaseIconContainer.vue
@@ -564,7 +564,7 @@ screen and (min-aspect-ratio: 1/1) and (min-height: 1080px) {
   }
   .active {
     display: none;
-  } 
+  }
 }
 .down {
   width: 5px;
diff --git a/src/renderer/components/BrowsingPip.vue b/src/renderer/components/BrowsingPip.vue
index c270fc9f8a..3f93615e93 100644
--- a/src/renderer/components/BrowsingPip.vue
+++ b/src/renderer/components/BrowsingPip.vue
@@ -62,6 +62,9 @@ export default {
       this.offset = null;
       this.windowSize = null;
     });
+    window.addEventListener('focus', () => {
+      electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.focus();
+    });
     electron.ipcRenderer.on('mouse-left-drag', (evt: Event, x: number, y: number) => {
       if (!this.offset || !this.offset.length) {
         const cursorPoint = electron.remote.screen.getCursorScreenPoint();
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 4023dff039..b4e2a67670 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -11,7 +11,7 @@
       :show-sidebar="showSidebar"
       :title="title"
       :is-reloading="isReloading"
-      :has-vide="hasVideo"
+      :web-info="webInfo"
       :handle-enter-pip="handleEnterPip"
       :handle-url-reload="handleUrlReload"
       :handle-url-back="handleUrlBack"
@@ -79,13 +79,11 @@ export default {
     return {
       quit: false,
       loadingState: false,
-      startTime: 0,
       pipType: '',
       bilibiliType: 'video',
       preload: `file:${require('path').resolve(__static, 'pip/preload.js')}`,
       maskToShow: false,
       dropFiles: [],
-      hasVideo: false,
       calculateVideoNum:
         'var iframe = document.querySelector("iframe");if (iframe && iframe.contentDocument) {document.getElementsByTagName("video").length + iframe.contentDocument.getElementsByTagName("video").length} else {document.getElementsByTagName("video").length}',
       getVideoStyle:
@@ -99,8 +97,6 @@ export default {
       browserIds: [1, 2],
       menuService: null,
       currentUrl: '',
-      canGoBack: false,
-      canGoForward: false,
       adaptFinished: false,
       pipInfo: {},
       isGlobal: false,
@@ -118,6 +114,12 @@ export default {
         /^https:\/\/account.xiaomi.com\/pass\//i,
       ],
       isReloading: false,
+      webInfo: {
+        hasVideo: false,
+        url: '',
+        canGoForward: false,
+        canGoBack: false,
+      },
     };
   },
   computed: {
@@ -166,6 +168,9 @@ export default {
           return 0;
       }
     },
+    hasVideo() {
+      return this.webInfo.hasVideo;
+    },
   },
   watch: {
     currentUrl(val: string) {
@@ -192,9 +197,6 @@ export default {
       }
     },
     hasVideo(val: boolean) {
-      this.$refs.browsingHeader.updateWebInfo({
-        hasVideo: val,
-      });
       this.updatePipState(val);
     },
     adaptFinished(val: boolean) {
@@ -254,7 +256,7 @@ export default {
     },
     loadingState(val: boolean) {
       if (val) {
-        this.hasVideo = false;
+        this.webInfo.hasVideo = false;
       } else {
         setTimeout(() => {
           const loadUrl = this.$electron.remote
@@ -275,7 +277,7 @@ export default {
             .webContents.executeJavaScript(
               this.calculateVideoNum,
               (r: number) => {
-                this.hasVideo = channel === 'youtube.com' && !getVideoId(loadUrl).id
+                this.webInfo.hasVideo = channel === 'youtube.com' && !getVideoId(loadUrl).id
                   ? false
                   : !!r;
               },
@@ -393,8 +395,10 @@ export default {
         this.currentUrl = urlParseLax(state.url).href;
         this.removeListener();
         this.addListenerToBrowser();
-        this.canGoBack = state.canGoBack;
-        this.canGoForward = state.canGoForward;
+        this.webInfo.canGoBack = state.canGoBack;
+        this.webInfo.canGoForward = state.canGoForward;
+        this.updateCanGoBack(this.webInfo.canGoBack);
+        this.updateCanGoForward(this.webInfo.canGoForward);
         const loadUrl = this.$electron.remote
           .getCurrentWindow()
           .getBrowserViews()[0]
@@ -409,22 +413,19 @@ export default {
         }
         if (!this.$electron.remote.getCurrentWindow()
           .getBrowserViews()[0].webContents.isLoading()) {
+          this.startLoading = false;
           this.$electron.remote
             .getCurrentWindow()
             .getBrowserViews()[0]
             .webContents.executeJavaScript(
               this.calculateVideoNum,
               (r: number) => {
-                this.hasVideo = channel === 'youtube.com' && !getVideoId(loadUrl).id
+                this.webInfo.hasVideo = channel === 'youtube.com' && !getVideoId(loadUrl).id
                   ? false
                   : !!r;
               },
             );
         }
-        this.$bus.$emit('update-web-info', {
-          canGoBack: state.canGoBack,
-          canGoForward: state.canGoForward,
-        });
       },
     );
   },
@@ -460,19 +461,9 @@ export default {
     },
     focusHandler() {
       this.menuService.updateFocusedWindow(true);
-      this.updatePipState(this.hasVideo);
-      this.updateCanGoBack(
-        this.$electron.remote
-          .getCurrentWindow()
-          .getBrowserViews()[0]
-          .webContents.canGoBack(),
-      );
-      this.updateCanGoForward(
-        this.$electron.remote
-          .getCurrentWindow()
-          .getBrowserViews()[0]
-          .webContents.canGoForward(),
-      );
+      this.updatePipState(this.webInfo.hasVideo);
+      this.updateCanGoBack(this.webInfo.canGoBack);
+      this.updateCanGoForward(this.webInfo.canGoForward);
       this.updateReload(true);
       const loadUrl = this.$electron.remote
         .getCurrentWindow()
@@ -487,7 +478,7 @@ export default {
         .getCurrentWindow()
         .getBrowserViews()[0]
         .webContents.executeJavaScript(this.calculateVideoNum, (r: number) => {
-          this.hasVideo = channel === 'youtube.com' && !getVideoId(loadUrl).id ? false : !!r;
+          this.webInfo.hasVideo = channel === 'youtube.com' && !getVideoId(loadUrl).id ? false : !!r;
         });
     },
     beforeUnloadHandler(e: BeforeUnloadEvent) {
@@ -539,13 +530,15 @@ export default {
     },
     updateCanGoBack(val: boolean) {
       if (this.$electron.remote.getCurrentWindow().isFocused()) {
-        this.$electron.ipcRenderer.send('update-enabled', 'history.back', val);
+        this.menuService.updateMenuItemEnabled(
+          'history.back',
+          val,
+        );
       }
     },
     updateCanGoForward(val: boolean) {
       if (this.$electron.remote.getCurrentWindow().isFocused()) {
-        this.$electron.ipcRenderer.send(
-          'update-enabled',
+        this.menuService.updateMenuItemEnabled(
           'history.forward',
           val,
         );
@@ -573,7 +566,7 @@ export default {
       if (this.currentUrl.includes('youtube')) {
         oldChannel = 'youtube.com';
       }
-      this.hasVideo = false;
+      this.webInfo.hasVideo = false;
       if (newChannel !== oldChannel) {
         this.removeListener();
         this.$electron.ipcRenderer.send('change-channel', { url });
@@ -626,13 +619,13 @@ export default {
     },
     willNavigate(e: Event, url: string) {
       if (!this.startLoading) {
+        this.startLoading = true;
         if (
           !url
           || url === 'about:blank'
           || urlParseLax(this.currentUrl).href === urlParseLax(url).href
         ) return;
         this.currentUrl = urlParseLax(url).href;
-        this.startTime = new Date().getTime();
         this.loadingState = true;
         this.$electron.ipcRenderer.send('create-browser-view', { url });
       }
@@ -649,7 +642,6 @@ export default {
           || urlParseLax(this.currentUrl).href === urlParseLax(url).href
         ) return;
         this.currentUrl = urlParseLax(url).href;
-        this.startTime = new Date().getTime();
         this.loadingState = true;
         this.$electron.ipcRenderer.send('create-browser-view', { url });
       }
@@ -676,9 +668,7 @@ export default {
           // }
           break;
         case 'fullscreenchange':
-          if (!this.isPip) {
-            this.headerToShow = !args.isFullScreen;
-          }
+          this.headerToShow = !args.isFullScreen;
           break;
         case 'keydown':
           if (['INPUT', 'TEXTAREA'].includes(args.targetName as string)) {
@@ -831,13 +821,13 @@ export default {
       }
     },
     handleUrlForward() {
-      if (this.canGoForward) {
+      if (this.webInfo.canGoForward) {
         this.removeListener();
         this.$electron.ipcRenderer.send('go-to-offset', 1);
       }
     },
     handleUrlBack() {
-      if (this.canGoBack) {
+      if (this.webInfo.canGoBack) {
         this.removeListener();
         this.$electron.ipcRenderer.send('go-to-offset', -1);
       }
@@ -875,10 +865,10 @@ export default {
       }
     },
     handleEnterPip(isGlobal: boolean) {
-      if (this.hasVideo) {
+      if (this.webInfo.hasVideo) {
         this.isGlobal = isGlobal;
         this.removeListener();
-        this.hasVideo = false;
+        this.webInfo.hasVideo = false;
         this.adaptFinished = false;
         this.enterPipOperation();
         this.updatePipState(false);
diff --git a/src/renderer/components/BrowsingView/BrowsingHeader.vue b/src/renderer/components/BrowsingView/BrowsingHeader.vue
index cb4608a3c6..e6d6bcbae6 100644
--- a/src/renderer/components/BrowsingView/BrowsingHeader.vue
+++ b/src/renderer/components/BrowsingView/BrowsingHeader.vue
@@ -5,8 +5,8 @@
     <browsing-control
       :handle-url-back="handleUrlBack"
       :handle-url-forward="handleUrlForward"
-      :back-type="backType"
-      :forward-type="forwardType"
+      :back-type="webInfo.canGoBack ? 'back' : 'backDisabled'"
+      :forward-type="webInfo.canGoForward ? 'forward' : 'forwardDisabled'"
       :web-info="webInfo"
     />
     <browsing-input
@@ -17,7 +17,7 @@
       :play-file-with-playing-view="playFileWithPlayingView"
     />
     <browsing-pip-control
-      :has-video="hasVideo"
+      :has-video="webInfo.hasVideo"
       :handle-enter-pip="handleEnterPip"
     />
   </div>
@@ -69,19 +69,14 @@ export default {
       type: Function,
       required: true,
     },
-    hasVideo: {
-      type: Boolean,
-      default: false,
+    webInfo: {
+      type: Object,
+      required: true,
     },
   },
   data() {
     return {
       showOpenUrl: false,
-      backType: 'backDisabled',
-      forwardType: 'forwardDisabled',
-      url: '',
-      canGoBack: false,
-      canGoForward: false,
     };
   },
   computed: {
@@ -89,30 +84,6 @@ export default {
     isDarwin() {
       return process.platform === 'darwin';
     },
-    webInfo() {
-      return {
-        canGoBack: this.canGoBack,
-        canGoForward: this.canGoForward,
-      };
-    },
-  },
-  watch: {
-    canGoBack(val: boolean) {
-      this.backType = val ? 'back' : 'backDisabled';
-    },
-    canGoForward(val: boolean) {
-      this.forwardType = val ? 'forward' : 'forwardDisabled';
-    },
-  },
-  mounted() {
-    this.$bus.$on('update-web-info', (info: {
-      hasVideo?: boolean, url?: string, canGoBack?: boolean, canGoForward?: boolean
-    }) => {
-      const keys = Object.keys(info);
-      keys.forEach((key: string) => {
-        this[key] = info[key];
-      });
-    });
   },
   methods: {
     closeUrlInput() {
@@ -126,14 +97,6 @@ export default {
         this.$electron.remote.BrowserView.getAllViews()[0].webContents.loadURL(inputUrl);
       }
     },
-    updateWebInfo(info: {
-      hasVideo?: boolean, url?: string, canGoBack?: boolean, canGoForward?: boolean
-    }) {
-      const keys = Object.keys(info);
-      keys.forEach((key: string) => {
-        this[key] = info[key];
-      });
-    },
   },
 };
 </script>
diff --git a/src/renderer/main.ts b/src/renderer/main.ts
index 0a7967a5f5..d204c6c7d1 100644
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@@ -965,12 +965,7 @@ new Vue({
         this.$bus.$emit('toggle-pip', false);
       });
       this.menuService.on('browsing.window.maxmize', () => {
-        const browserWindow = this.$electron.remote.getCurrentWindow();
-        if (!browserWindow.isMaximized()) {
-          this.$electron.ipcRenderer.send('callMainWindowMethod', 'maximize');
-        } else {
-          this.$electron.ipcRenderer.send('callMainWindowMethod', 'unmaximize');
-        }
+        this.$electron.ipcRenderer.send('set-window-maximize');
       });
       this.menuService.on('browsing.window.backToLandingView', () => {
         this.$bus.$emit('back-to-landingview');

From a20d981b1599c7b3d544b643dd0bd96adbcc6908 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 17:57:19 +0800
Subject: [PATCH 102/123] feat(browsing): win version

---
 ...ose.svg => browsingclose-default-icon.svg} |  0
 ...vg => browsingfullscreen-default-icon.svg} |  0
 ....svg => browsingminimize-default-icon.svg} |  0
 .../BrowsingView/BrowsingHeader.vue           |  5 ++
 .../components/BrowsingView/BrowsingInput.vue |  7 ++
 .../BrowsingView/BrowsingTitleBar.vue         | 83 +++++++++++++++++++
 6 files changed, 95 insertions(+)
 rename src/renderer/assets/icon/{menuBar/__icon/--close.svg => browsingclose-default-icon.svg} (100%)
 rename src/renderer/assets/icon/{menuBar/__icon/--fullscreen.svg => browsingfullscreen-default-icon.svg} (100%)
 rename src/renderer/assets/icon/{menuBar/__icon/--minimize.svg => browsingminimize-default-icon.svg} (100%)
 create mode 100644 src/renderer/components/BrowsingView/BrowsingTitleBar.vue

diff --git a/src/renderer/assets/icon/menuBar/__icon/--close.svg b/src/renderer/assets/icon/browsingclose-default-icon.svg
similarity index 100%
rename from src/renderer/assets/icon/menuBar/__icon/--close.svg
rename to src/renderer/assets/icon/browsingclose-default-icon.svg
diff --git a/src/renderer/assets/icon/menuBar/__icon/--fullscreen.svg b/src/renderer/assets/icon/browsingfullscreen-default-icon.svg
similarity index 100%
rename from src/renderer/assets/icon/menuBar/__icon/--fullscreen.svg
rename to src/renderer/assets/icon/browsingfullscreen-default-icon.svg
diff --git a/src/renderer/assets/icon/menuBar/__icon/--minimize.svg b/src/renderer/assets/icon/browsingminimize-default-icon.svg
similarity index 100%
rename from src/renderer/assets/icon/menuBar/__icon/--minimize.svg
rename to src/renderer/assets/icon/browsingminimize-default-icon.svg
diff --git a/src/renderer/components/BrowsingView/BrowsingHeader.vue b/src/renderer/components/BrowsingView/BrowsingHeader.vue
index cb4608a3c6..4bc1700ef2 100644
--- a/src/renderer/components/BrowsingView/BrowsingHeader.vue
+++ b/src/renderer/components/BrowsingView/BrowsingHeader.vue
@@ -20,6 +20,9 @@
       :has-video="hasVideo"
       :handle-enter-pip="handleEnterPip"
     />
+    <browsing-title-bar
+      v-if="!isDarwin"
+    />
   </div>
 </template>
 
@@ -28,6 +31,7 @@ import { mapGetters } from 'vuex';
 import BrowsingInput from '@/components/BrowsingView/BrowsingInput.vue';
 import BrowsingControl from '@/components/BrowsingView/BrowsingControl.vue';
 import BrowsingPipControl from '@/components/BrowsingView/BrowsingPipControl.vue';
+import BrowsingTitleBar from '@/components/BrowsingView/BrowsingTitleBar.vue';
 
 export default {
   name: 'BrowsingHeader',
@@ -35,6 +39,7 @@ export default {
     'browsing-input': BrowsingInput,
     'browsing-control': BrowsingControl,
     'browsing-pip-control': BrowsingPipControl,
+    'browsing-title-bar': BrowsingTitleBar,
   },
   props: {
     showSidebar: {
diff --git a/src/renderer/components/BrowsingView/BrowsingInput.vue b/src/renderer/components/BrowsingView/BrowsingInput.vue
index 6e8abf88af..45e9f2a32d 100644
--- a/src/renderer/components/BrowsingView/BrowsingInput.vue
+++ b/src/renderer/components/BrowsingView/BrowsingInput.vue
@@ -4,12 +4,18 @@
   >
     <div
       @dblclick="handleDbClick"
+      :style="{
+        order: isDarwin ? 1 : 2,
+      }"
       class="url-search"
     >
       {{ title }}
     </div>
     <div
       @mouseup="handleUrlReload"
+      :style="{
+        order: isDarwin ? 2 : 1,
+      }"
       class="control-button page-refresh-icon no-drag"
     >
       <Icon
@@ -118,6 +124,7 @@ export default {
   }
   .page-refresh-icon {
     margin-right: 8px;
+    margin-left: 8px;
   }
 }
 </style>
diff --git a/src/renderer/components/BrowsingView/BrowsingTitleBar.vue b/src/renderer/components/BrowsingView/BrowsingTitleBar.vue
new file mode 100644
index 0000000000..36391ddc7b
--- /dev/null
+++ b/src/renderer/components/BrowsingView/BrowsingTitleBar.vue
@@ -0,0 +1,83 @@
+<template>
+  <div
+    class="browsing-title-bar"
+  >
+    <div
+      @mouseup="handleMinimize"
+      class="control-button minimize-icon no-drag button-hover"
+    >
+      <Icon
+        type="browsingminimize"
+      />
+    </div>
+    <div
+      @mouseup="handleFullScreen"
+      class="control-button fullscreen-icon button-hover"
+    >
+      <Icon
+        ref="back"
+        type="browsingfullscreen"
+      />
+    </div>
+    <div
+      @mouseup="handleClose"
+      class="control-button close-icon button-hover"
+    >
+      <Icon
+        ref="forward"
+        type="browsingclose"
+      />
+    </div>
+  </div>  
+</template>
+<script lang="ts">
+import Icon from '@/components/BaseIconContainer.vue';
+export default {
+  components: {
+    Icon,
+  },
+  methods: {
+    handleMinimize() {
+      this.$electron.ipcRenderer.send('callMainWindowMethod', 'minimize');
+    },
+    handleFullScreen() {
+      this.$electron.ipcRenderer.send('callMainWindowMethod', 'maximize');
+    },
+    handleClose() {
+      this.$electron.ipcRenderer.send('callMainWindowMethod', 'close');
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.browsing-title-bar {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  z-index: 6;
+  width: 114px;
+  border-left: 1px solid #F2F1F4;
+  .control-button {
+    width: 30px;
+    height: 30px;
+    border-radius: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: background-color 100ms ease-in;
+  }
+  .button-hover:hover {
+    background-color: #ECEEF0;
+  }
+  .minimize-icon {
+    margin-left: 8px;
+  }
+  .fullscreen-icon {
+    margin-left: 4px;
+    margin-right: 4px;
+  }
+  .close-icon {
+    margin-right: 8px;
+  }
+}
+</style>

From e75b9b04b85bb9e7e7822fa3b2b0ceaa2ae55160 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 18:02:08 +0800
Subject: [PATCH 103/123] fix(browsing): icon size

---
 .../icon/menuBar/__icon/--stopRefresh.svg      |  9 ---------
 .../assets/icon/reloadStop-default-icon.svg    | 14 ++++++++------
 src/renderer/components/BaseIconContainer.vue  | 18 ------------------
 3 files changed, 8 insertions(+), 33 deletions(-)
 delete mode 100644 src/renderer/assets/icon/menuBar/__icon/--stopRefresh.svg

diff --git a/src/renderer/assets/icon/menuBar/__icon/--stopRefresh.svg b/src/renderer/assets/icon/menuBar/__icon/--stopRefresh.svg
deleted file mode 100644
index 73b78d6a48..0000000000
--- a/src/renderer/assets/icon/menuBar/__icon/--stopRefresh.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
-    <title>menuBar/__icon/--stopRefresh</title>
-    <desc>Created with Sketch.</desc>
-    <g id="menuBar/__icon/--stopRefresh" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M10.1209632,8.98959236 L14.9992778,13.8682778 L19.8790368,8.98959236 C20.1630545,8.70557469 20.6074957,8.67975491 20.9206813,8.912133 L21.0104076,8.98959236 C21.3228271,9.30201179 21.3228271,9.80854378 21.0104076,10.1209632 L21.0104076,10.1209632 L16.1312778,14.9992778 L21.0104076,19.8790368 C21.3228271,20.1914562 21.3228271,20.6979882 21.0104076,21.0104076 C20.6979882,21.3228271 20.1914562,21.3228271 19.8790368,21.0104076 L14.9992778,16.1312778 L10.1209632,21.0104076 C9.83694554,21.2944253 9.39250428,21.3202451 9.07931869,21.087867 L8.98959236,21.0104076 C8.67717293,20.6979882 8.67717293,20.1914562 8.98959236,19.8790368 L8.98959236,19.8790368 L13.8682778,14.9992778 L8.98959236,10.1209632 C8.67717293,9.80854378 8.67717293,9.30201179 8.98959236,8.98959236 C9.30201179,8.67717293 9.80854378,8.67717293 10.1209632,8.98959236 Z" id="icon" fill="#7E808F" fill-rule="nonzero"></path>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/src/renderer/assets/icon/reloadStop-default-icon.svg b/src/renderer/assets/icon/reloadStop-default-icon.svg
index fa983a31b2..73b78d6a48 100644
--- a/src/renderer/assets/icon/reloadStop-default-icon.svg
+++ b/src/renderer/assets/icon/reloadStop-default-icon.svg
@@ -1,7 +1,9 @@
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="menuBar/__icon/--stopRefresh" transform="translate(-8.000000, -8.000000)" fill="#6E7085">
-            <path d="M10.1209632,8.98959236 L14.9992778,13.8682778 L19.8790368,8.98959236 C20.1630545,8.70557469 20.6074957,8.67975491 20.9206813,8.912133 L21.0104076,8.98959236 C21.3228271,9.30201179 21.3228271,9.80854378 21.0104076,10.1209632 L21.0104076,10.1209632 L16.1312778,14.9992778 L21.0104076,19.8790368 C21.3228271,20.1914562 21.3228271,20.6979882 21.0104076,21.0104076 C20.6979882,21.3228271 20.1914562,21.3228271 19.8790368,21.0104076 L14.9992778,16.1312778 L10.1209632,21.0104076 C9.83694554,21.2944253 9.39250428,21.3202451 9.07931869,21.087867 L8.98959236,21.0104076 C8.67717293,20.6979882 8.67717293,20.1914562 8.98959236,19.8790368 L8.98959236,19.8790368 L13.8682778,14.9992778 L8.98959236,10.1209632 C8.67717293,9.80854378 8.67717293,9.30201179 8.98959236,8.98959236 C9.30201179,8.67717293 9.80854378,8.67717293 10.1209632,8.98959236 Z" id="icon"></path>
-        </g>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--stopRefresh</title>
+    <desc>Created with Sketch.</desc>
+    <g id="menuBar/__icon/--stopRefresh" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10.1209632,8.98959236 L14.9992778,13.8682778 L19.8790368,8.98959236 C20.1630545,8.70557469 20.6074957,8.67975491 20.9206813,8.912133 L21.0104076,8.98959236 C21.3228271,9.30201179 21.3228271,9.80854378 21.0104076,10.1209632 L21.0104076,10.1209632 L16.1312778,14.9992778 L21.0104076,19.8790368 C21.3228271,20.1914562 21.3228271,20.6979882 21.0104076,21.0104076 C20.6979882,21.3228271 20.1914562,21.3228271 19.8790368,21.0104076 L14.9992778,16.1312778 L10.1209632,21.0104076 C9.83694554,21.2944253 9.39250428,21.3202451 9.07931869,21.087867 L8.98959236,21.0104076 C8.67717293,20.6979882 8.67717293,20.1914562 8.98959236,19.8790368 L8.98959236,19.8790368 L13.8682778,14.9992778 L8.98959236,10.1209632 C8.67717293,9.80854378 8.67717293,9.30201179 8.98959236,8.98959236 C9.30201179,8.67717293 9.80854378,8.67717293 10.1209632,8.98959236 Z" id="icon" fill="#7E808F" fill-rule="nonzero"></path>
     </g>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/components/BaseIconContainer.vue b/src/renderer/components/BaseIconContainer.vue
index 0f708bee1e..3fd82f57db 100644
--- a/src/renderer/components/BaseIconContainer.vue
+++ b/src/renderer/components/BaseIconContainer.vue
@@ -544,24 +544,6 @@ screen and (min-aspect-ratio: 1/1) and (min-height: 1080px) {
   height: 16px;
   display: block;
 }
-.backDisabled, .forwardDisabled {
-  display: block;
-  width: 16px;
-  height: 16px;
-}
-.back, .forward, .pageRefresh, .reloadStop {
-  width: 16px;
-  height: 16px;
- .default {
-    display: block;
-  }
-  .hover {
-    display: none;
-  }
-  .active {
-    display: none;
-  }
-}
 .down {
   width: 5px;
   height: 7px;

From a82c1385c3b2400d4a8900c5d22061ad8dcfba2d Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 18:07:12 +0800
Subject: [PATCH 104/123] fix(browsing): lint fix

---
 src/renderer/components/BrowsingView/BrowsingTitleBar.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/BrowsingView/BrowsingTitleBar.vue b/src/renderer/components/BrowsingView/BrowsingTitleBar.vue
index 36391ddc7b..7be4b4da1f 100644
--- a/src/renderer/components/BrowsingView/BrowsingTitleBar.vue
+++ b/src/renderer/components/BrowsingView/BrowsingTitleBar.vue
@@ -28,10 +28,11 @@
         type="browsingclose"
       />
     </div>
-  </div>  
+  </div>
 </template>
 <script lang="ts">
 import Icon from '@/components/BaseIconContainer.vue';
+
 export default {
   components: {
     Icon,

From 4620a44b5d2c9c80d64338f4fc984079b3fef010 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Fri, 6 Sep 2019 18:34:39 +0800
Subject: [PATCH 105/123] fix(browsingview): fix error in windows

---
 src/main/index.js                        | 11 ++++++-----
 src/renderer/components/BrowsingView.vue | 12 ++++++------
 src/renderer/locales/lang/en.json        |  8 ++++----
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index 10fb9f8676..ad9852668a 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -753,6 +753,7 @@ function registerMainWindowEvent(mainWindow) {
     } else {
       mainWindow.removeBrowserView(mainWindow.getBrowserView());
       mainWindow.addBrowserView(mainBrowser.page.view);
+      browsingWindow.setSize(browsingWindow.getSize()[0] + 1, browsingWindow.getSize()[1]);
       browsingWindow.addBrowserView(pipBrowser);
       createPipControlView();
       createTitlebarView();
@@ -1177,13 +1178,13 @@ if (process.platform === 'darwin') {
 }
 
 app.on('ready', () => {
-  systemPreferences.subscribeNotification('AppleInterfaceThemeChangedNotification', () => {
-    if (routeName === 'browsing-view') {
-      menuService.updatePipIcon();
-    }
-  });
   menuService = new MenuService();
   if (process.platform === 'darwin') {
+    systemPreferences.subscribeNotification('AppleInterfaceThemeChangedNotification', () => {
+      if (routeName === 'browsing-view') {
+        menuService.updatePipIcon();
+      }
+    });
     systemPreferences.setUserDefault('NSDisabledDictationMenuItem', 'boolean', true);
     systemPreferences.setUserDefault('NSDisabledCharacterPaletteMenuItem', 'boolean', true);
   }
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index b4e2a67670..a2cd77da22 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -10,7 +10,7 @@
       ref="browsingHeader"
       :show-sidebar="showSidebar"
       :title="title"
-      :is-reloading="isReloading"
+      :is-reloading="loadingState"
       :web-info="webInfo"
       :handle-enter-pip="handleEnterPip"
       :handle-url-reload="handleUrlReload"
@@ -113,7 +113,6 @@ export default {
         /^https:\/\/auth.alipay.com\/login\//i,
         /^https:\/\/account.xiaomi.com\/pass\//i,
       ],
-      isReloading: false,
       webInfo: {
         hasVideo: false,
         url: '',
@@ -255,6 +254,7 @@ export default {
       }
     },
     loadingState(val: boolean) {
+      console.log(val);
       if (val) {
         this.webInfo.hasVideo = false;
       } else {
@@ -687,7 +687,6 @@ export default {
         .webContents.focus();
     },
     didStopLoading() {
-      this.isReloading = false;
       this.loadingState = false;
     },
     handleOpenUrl({ url }: { url: string }) {
@@ -699,6 +698,7 @@ export default {
         || url === 'about:blank'
         || urlParseLax(openUrl).href === urlParseLax(this.currentUrl).href
       ) return;
+      this.loadingState = true;
       const newHostname = urlParseLax(openUrl).hostname;
       const oldHostname = urlParseLax(this.currentUrl).hostname;
       let newChannel = newHostname.slice(
@@ -833,12 +833,12 @@ export default {
       }
     },
     handleUrlReload() {
-      if (!this.isReloading) {
-        this.isReloading = true;
+      if (!this.isLoading) {
+        this.loadingState = true;
         this.$electron.remote.getCurrentWindow()
           .getBrowserViews()[0].webContents.reload();
       } else {
-        this.isReloading = false;
+        this.loadingState = false;
         this.$electron.remote.getCurrentWindow()
           .getBrowserViews()[0].webContents.stop();
       }
diff --git a/src/renderer/locales/lang/en.json b/src/renderer/locales/lang/en.json
index 1bbea43d4f..215262d0c8 100644
--- a/src/renderer/locales/lang/en.json
+++ b/src/renderer/locales/lang/en.json
@@ -197,10 +197,10 @@
       "minimize": "Minimize",
       "name": "Window",
       "originSize": "100%",
-      "enterPip": "Enter Picture In Picture",
-      "exitPip": "Exit Picture In Picture",
-      "playInNewWindow": "Play In New Window",
-      "backToBrowser": "Back To Browser"
+      "enterPip": "Enter Picture in Picture",
+      "exitPip": "Exit Picture in Picture",
+      "playInNewWindow": "Play in New Window",
+      "backToBrowser": "Back to Browser"
     },
     "favourite": {
       "name": "Channel",

From a0dd7ebd9a4b84eeea56e42c8fb2fc714463be74 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Fri, 6 Sep 2019 19:00:21 +0800
Subject: [PATCH 106/123] feat(browsingview): store pip mode in local storage

---
 src/renderer/components/BrowsingView.vue      | 76 ++++++++++---------
 .../BrowsingView/BrowsingPipControl.vue       | 17 +++--
 src/renderer/main.ts                          |  4 +-
 src/renderer/store/actionTypes.js             |  1 +
 src/renderer/store/modules/Browsing.js        |  8 ++
 src/renderer/store/mutationTypes.js           |  1 +
 6 files changed, 64 insertions(+), 43 deletions(-)

diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index a2cd77da22..6a8a2aee6a 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -136,6 +136,7 @@ export default {
       'isFullScreen',
       'isFocused',
       'isPip',
+      'pipMode',
     ]),
     isDarwin() {
       return process.platform === 'darwin';
@@ -254,7 +255,6 @@ export default {
       }
     },
     loadingState(val: boolean) {
-      console.log(val);
       if (val) {
         this.webInfo.hasVideo = false;
       } else {
@@ -411,9 +411,9 @@ export default {
         if (loadUrl.includes('youtube')) {
           channel = 'youtube.com';
         }
+        this.startLoading = false;
         if (!this.$electron.remote.getCurrentWindow()
           .getBrowserViews()[0].webContents.isLoading()) {
-          this.startLoading = false;
           this.$electron.remote
             .getCurrentWindow()
             .getBrowserViews()[0]
@@ -439,6 +439,7 @@ export default {
         browsingSize: this.browsingSize,
         browsingPos: this.browsingPos,
         barrageOpen: this.barrageOpen,
+        pipMode: this.pipMode,
       })
       .finally(() => {
         this.menuService.updateMenuItemEnabled('file.open', true);
@@ -492,6 +493,7 @@ export default {
             browsingSize: this.browsingSize,
             browsingPos: this.browsingPos,
             barrageOpen: this.barrageOpen,
+            pipMode: this.pipMode,
           })
           .finally(() => {
             if (!this.isPip) {
@@ -690,41 +692,43 @@ export default {
       this.loadingState = false;
     },
     handleOpenUrl({ url }: { url: string }) {
-      this.startLoading = true;
-      const protocol = urlParseLax(url).protocol;
-      const openUrl = protocol ? url : `https:${url}`;
-      if (
-        !url
-        || url === 'about:blank'
-        || urlParseLax(openUrl).href === urlParseLax(this.currentUrl).href
-      ) return;
-      this.loadingState = true;
-      const newHostname = urlParseLax(openUrl).hostname;
-      const oldHostname = urlParseLax(this.currentUrl).hostname;
-      let newChannel = newHostname.slice(
-        newHostname.indexOf('.') + 1,
-        newHostname.length,
-      );
-      let oldChannel = oldHostname.slice(
-        oldHostname.indexOf('.') + 1,
-        oldHostname.length,
-      );
-      if (openUrl.includes('youtube')) {
-        newChannel = 'youtube.com';
-      }
-      if (this.currentUrl.includes('youtube')) {
-        oldChannel = 'youtube.com';
-      }
-      if (this.oauthRegex.some((re: RegExp) => re.test(url))) return;
-      if (oldChannel === newChannel) {
+      if (!this.startLoading) {
+        this.startLoading = true;
+        const protocol = urlParseLax(url).protocol;
+        const openUrl = protocol ? url : `https:${url}`;
+        if (
+          !url
+          || url === 'about:blank'
+          || urlParseLax(openUrl).href === urlParseLax(this.currentUrl).href
+        ) return;
         this.loadingState = true;
-        this.currentUrl = urlParseLax(openUrl).href;
-        this.$electron.ipcRenderer.send('create-browser-view', {
-          url: openUrl,
-          isNewWindow: true,
-        });
-      } else {
-        this.$electron.shell.openExternal(openUrl);
+        const newHostname = urlParseLax(openUrl).hostname;
+        const oldHostname = urlParseLax(this.currentUrl).hostname;
+        let newChannel = newHostname.slice(
+          newHostname.indexOf('.') + 1,
+          newHostname.length,
+        );
+        let oldChannel = oldHostname.slice(
+          oldHostname.indexOf('.') + 1,
+          oldHostname.length,
+        );
+        if (openUrl.includes('youtube')) {
+          newChannel = 'youtube.com';
+        }
+        if (this.currentUrl.includes('youtube')) {
+          oldChannel = 'youtube.com';
+        }
+        if (this.oauthRegex.some((re: RegExp) => re.test(url))) return;
+        if (oldChannel === newChannel) {
+          this.loadingState = true;
+          this.currentUrl = urlParseLax(openUrl).href;
+          this.$electron.ipcRenderer.send('create-browser-view', {
+            url: openUrl,
+            isNewWindow: true,
+          });
+        } else {
+          this.$electron.shell.openExternal(openUrl);
+        }
       }
     },
     pipAdapter() {
diff --git a/src/renderer/components/BrowsingView/BrowsingPipControl.vue b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
index ad2ff629e8..0baaa6c7a9 100644
--- a/src/renderer/components/BrowsingView/BrowsingPipControl.vue
+++ b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
@@ -3,12 +3,12 @@
     class="pip-control"
   >
     <div
-      @mouseup="handleEnterPip(pip === 'Enter')"
+      @mouseup="handleEnterPip(pipMode === 'Enter')"
       :class="hasVideo ? 'button-hover' : ''"
       class="pip-icon no-drag"
     >
       <Icon
-        :type="pipMode"
+        :type="pipIconType"
       />
     </div>
     <div
@@ -28,7 +28,9 @@
   </div>
 </template>
 <script lang="ts">
+import { mapGetters, mapActions } from 'vuex';
 import Icon from '@/components/BaseIconContainer.vue';
+import { Browsing as browsingActions } from '@/store/actionTypes';
 
 export default {
   components: {
@@ -46,13 +48,13 @@ export default {
   },
   data() {
     return {
-      pip: 'Enter',
       switchPip: false,
     };
   },
   computed: {
-    pipMode() {
-      return this.pip === 'Enter' ? this.pipType : this.popType;
+    ...mapGetters(['pipMode']),
+    pipIconType() {
+      return this.pipMode === 'Enter' ? this.pipType : this.popType;
     },
     pipType() {
       return this.hasVideo ? 'pip' : 'pipDisabled';
@@ -62,8 +64,11 @@ export default {
     },
   },
   methods: {
+    ...mapActions({
+      updatePipMode: browsingActions.UPDATE_PIP_MODE,
+    }),
     switchPipType() {
-      this.pip = this.pip === 'Enter' ? 'Global' : 'Enter';
+      this.updatePipMode(this.pipMode === 'Enter' ? 'Global' : 'Enter');
       this.switchPip = true;
     },
   },
diff --git a/src/renderer/main.ts b/src/renderer/main.ts
index d204c6c7d1..e2d87f9b0f 100644
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@@ -179,7 +179,7 @@ new Vue({
     };
   },
   computed: {
-    ...mapGetters(['volume', 'muted', 'intrinsicWidth', 'intrinsicHeight', 'ratio', 'winAngle', 'winWidth', 'winHeight', 'winPos', 'winSize', 'chosenStyle', 'chosenSize', 'mediaHash', 'list', 'enabledSecondarySub', 'isRefreshing', 'browsingSize', 'pipSize', 'pipPos', 'barrageOpen', 'isPip', 'pipAlwaysOnTop', 'isMaximized',
+    ...mapGetters(['volume', 'muted', 'intrinsicWidth', 'intrinsicHeight', 'ratio', 'winAngle', 'winWidth', 'winHeight', 'winPos', 'winSize', 'chosenStyle', 'chosenSize', 'mediaHash', 'list', 'enabledSecondarySub', 'isRefreshing', 'browsingSize', 'pipSize', 'pipPos', 'barrageOpen', 'isPip', 'pipAlwaysOnTop', 'isMaximized', 'pipMode',
       'primarySubtitleId', 'secondarySubtitleId', 'audioTrackList', 'isFullScreen', 'paused', 'singleCycle', 'isHiddenByBossKey', 'isMinimized', 'isFocused', 'originSrc', 'defaultDir', 'ableToPushCurrentSubtitle', 'displayLanguage', 'calculatedNoSub', 'sizePercent', 'snapshotSavedPath', 'duration', 'reverseScrolling', 'pipSize', 'pipPos',
     ]),
     ...inputMapGetters({
@@ -394,6 +394,7 @@ new Vue({
         this.$store.dispatch('updateBrowsingPos', data.browsingPos);
       }
       this.updateBarrageOpen(data.barrageOpen || this.barrageOpen);
+      this.updatePipMode(data.pipMode || this.pipMode);
     });
     asyncStorage.get('browsingPip').then((data) => {
       this.$store.dispatch('updatePipSize', data.pipSize || this.pipSize);
@@ -676,6 +677,7 @@ new Vue({
       changeSecondarySubDelay: SubtitleManager.alterSecondaryDelay,
       updateBarrageOpen: browsingActions.UPDATE_BARRAGE_OPEN,
       showAudioTranslateModal: atActions.AUDIO_TRANSLATE_SHOW_MODAL,
+      updatePipMode: browsingActions.UPDATE_PIP_MODE,
     }),
     async initializeMenuSettings() {
       if (this.currentRouteName !== 'welcome-privacy' && this.currentRouteName !== 'language-setting') {
diff --git a/src/renderer/store/actionTypes.js b/src/renderer/store/actionTypes.js
index b9b18b9313..d6dfb65808 100644
--- a/src/renderer/store/actionTypes.js
+++ b/src/renderer/store/actionTypes.js
@@ -132,4 +132,5 @@ export const Browsing = {
   UPDATE_RECORD_URL: 'UPDATE_RECORD_URL',
   UPDATE_BARRAGE_OPEN: 'UPDATE_BARRAGE_OPEN',
   UPDATE_IS_PIP: 'UPDATE_IS_PIP',
+  UPDATE_PIP_MODE: 'UPDATE_PIP_MODE',
 };
diff --git a/src/renderer/store/modules/Browsing.js b/src/renderer/store/modules/Browsing.js
index 489345c9ca..3215e921e6 100644
--- a/src/renderer/store/modules/Browsing.js
+++ b/src/renderer/store/modules/Browsing.js
@@ -6,12 +6,14 @@ const state = {
   recordUrl: {},
   barrageOpen: false,
   isPip: false,
+  pipMode: 'Enter',
 };
 const getters = {
   initialUrl: state => state.initialUrl,
   recordUrl: state => state.recordUrl,
   barrageOpen: state => state.barrageOpen,
   isPip: state => state.isPip,
+  pipMode: state => state.pipMode,
 };
 
 const mutations = {
@@ -27,6 +29,9 @@ const mutations = {
   [browsingMutations.IS_PIP_UPDATE](state, payload) {
     state.isPip = payload;
   },
+  [browsingMutations.PIP_MODE_UPDATE](state, payload) {
+    state.pipMode = payload;
+  },
 };
 const actions = {
   [browsingActions.UPDATE_INITIAL_URL]({ commit }, delta) {
@@ -41,6 +46,9 @@ const actions = {
   [browsingActions.UPDATE_IS_PIP]({ commit }, delta) {
     commit(browsingMutations.IS_PIP_UPDATE, delta);
   },
+  [browsingActions.UPDATE_PIP_MODE]({ commit }, delta) {
+    commit(browsingMutations.PIP_MODE_UPDATE, delta);
+  },
 };
 export default {
   state,
diff --git a/src/renderer/store/mutationTypes.js b/src/renderer/store/mutationTypes.js
index 02d6863576..2682c71669 100644
--- a/src/renderer/store/mutationTypes.js
+++ b/src/renderer/store/mutationTypes.js
@@ -133,4 +133,5 @@ export const Browsing = {
   RECORD_URL_UPDATE: 'RECORD_URL_UPDATE',
   BARRAGE_OPEN_UPDATE: 'BARRAGE_OPEN_UPDATE',
   IS_PIP_UPDATE: 'IS_PIP_UPDATE',
+  PIP_MODE_UPDATE: 'PIP_MODE_UPDATE',
 };

From 098cb73089a64d6266fdf572def866f0329ac5bf Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 19:05:45 +0800
Subject: [PATCH 107/123] feat(sidebar): sidebar icon no-drag

---
 src/renderer/components/LandingView/BilibiliSidebarIcon.vue | 2 +-
 src/renderer/components/LandingView/YoutubeSidebarIcon.vue  | 2 +-
 src/renderer/components/LandingView/iQiyiSidebarIcon.vue    | 2 +-
 src/renderer/components/Sidebar.vue                         | 3 +++
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/LandingView/BilibiliSidebarIcon.vue b/src/renderer/components/LandingView/BilibiliSidebarIcon.vue
index 336877dcee..afd2c8ec9d 100644
--- a/src/renderer/components/LandingView/BilibiliSidebarIcon.vue
+++ b/src/renderer/components/LandingView/BilibiliSidebarIcon.vue
@@ -2,7 +2,7 @@
   <div
     @mouseover="mouseover = true"
     @mouseout="mouseover = false"
-    @mouseup="mouseupOnIcon(url)"
+    @click="mouseupOnIcon(url)"
     :style="{
       opacity: mouseover || selected ? '1.0' : '0.7',
     }"
diff --git a/src/renderer/components/LandingView/YoutubeSidebarIcon.vue b/src/renderer/components/LandingView/YoutubeSidebarIcon.vue
index 9b3b34d664..9ef8a926ec 100644
--- a/src/renderer/components/LandingView/YoutubeSidebarIcon.vue
+++ b/src/renderer/components/LandingView/YoutubeSidebarIcon.vue
@@ -2,7 +2,7 @@
   <div
     @mouseover="mouseover = true"
     @mouseout="mouseover = false"
-    @mouseup="mouseupOnIcon(url)"
+    @click="mouseupOnIcon(url)"
     :style="{
       opacity: mouseover || selected ? '1.0' : '0.7',
     }"
diff --git a/src/renderer/components/LandingView/iQiyiSidebarIcon.vue b/src/renderer/components/LandingView/iQiyiSidebarIcon.vue
index e59010c7ec..588ceab2f3 100644
--- a/src/renderer/components/LandingView/iQiyiSidebarIcon.vue
+++ b/src/renderer/components/LandingView/iQiyiSidebarIcon.vue
@@ -2,7 +2,7 @@
   <div
     @mouseover="mouseover = true"
     @mouseout="mouseover = false"
-    @mouseup="mouseupOnIcon(url)"
+    @click="mouseupOnIcon(url)"
     :style="{
       opacity: mouseover || selected ? '1.0' : '0.7',
     }"
diff --git a/src/renderer/components/Sidebar.vue b/src/renderer/components/Sidebar.vue
index 1a5d454622..ae690c3c34 100644
--- a/src/renderer/components/Sidebar.vue
+++ b/src/renderer/components/Sidebar.vue
@@ -7,16 +7,19 @@
         :selected="currentUrl.includes('bilibili')"
         :url="'https://www.bilibili.com/'"
         :mouseup-on-icon="handleSidebarIcon"
+        class="no-drag"
       />
       <iQiyiSidebarIcon
         :selected="currentUrl.includes('iqiyi')"
         :url="'https://www.iqiyi.com/'"
         :mouseup-on-icon="handleSidebarIcon"
+        class="no-drag"
       />
       <YoutubeSidebarIcon
         :selected="currentUrl.includes('youtube')"
         :url="'https://www.youtube.com/'"
         :mouseup-on-icon="handleSidebarIcon"
+        class="no-drag"
       />
     </div>
   </div>

From aee2f3034bff583bb2e1e1fd707e8238284d9165 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 19:08:13 +0800
Subject: [PATCH 108/123] fix(sidebaricon): error fix

---
 src/renderer/components/LandingView/BilibiliSidebarIcon.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/LandingView/BilibiliSidebarIcon.vue b/src/renderer/components/LandingView/BilibiliSidebarIcon.vue
index afd2c8ec9d..4b98518313 100644
--- a/src/renderer/components/LandingView/BilibiliSidebarIcon.vue
+++ b/src/renderer/components/LandingView/BilibiliSidebarIcon.vue
@@ -9,7 +9,7 @@
     class="sidebar"
   >
     <svg
-      width="44x"
+      width="44px"
       height="44px"
       viewBox="0 0 44 44"
       version="1.1"

From 91c5b132b434e3c5d405a29e656dd2e560452a22 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Fri, 6 Sep 2019 19:09:54 +0800
Subject: [PATCH 109/123] fix(browsing): icon no-drag

---
 src/renderer/components/BrowsingView/BrowsingControl.vue    | 4 ++--
 src/renderer/components/BrowsingView/BrowsingPipControl.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/BrowsingView/BrowsingControl.vue b/src/renderer/components/BrowsingView/BrowsingControl.vue
index 063465c770..656a419492 100644
--- a/src/renderer/components/BrowsingView/BrowsingControl.vue
+++ b/src/renderer/components/BrowsingView/BrowsingControl.vue
@@ -16,7 +16,7 @@
     <div
       @mouseup="handleUrlBack"
       :class="backType.toString() === 'back' ? 'button-hover' : ''"
-      class="control-button back-icon"
+      class="control-button back-icon no-drag"
     >
       <Icon
         ref="back"
@@ -26,7 +26,7 @@
     <div
       @mouseup="handleUrlForward"
       :class="forwardType.toString() === 'forward' ? 'button-hover' : ''"
-      class="control-button forward-icon"
+      class="control-button forward-icon no-drag"
     >
       <Icon
         ref="forward"
diff --git a/src/renderer/components/BrowsingView/BrowsingPipControl.vue b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
index 0baaa6c7a9..c59c81cc47 100644
--- a/src/renderer/components/BrowsingView/BrowsingPipControl.vue
+++ b/src/renderer/components/BrowsingView/BrowsingPipControl.vue
@@ -18,7 +18,7 @@
       :style="{
       }"
       :class="switchPip ? 'translate' : ''"
-      class="down-icon"
+      class="down-icon no-drag"
     >
       <Icon
         type="switchMode"

From 42b6816849fee415294195e7a1e1b60226c07845 Mon Sep 17 00:00:00 2001
From: Sin <dev@zouxin.net>
Date: Fri, 6 Sep 2019 19:18:27 +0800
Subject: [PATCH 110/123] build(ci): use node 11 for osx-mouse

---
 .travis.yml       | 2 +-
 appveyor-appx.yml | 2 +-
 appveyor.yml      | 2 +-
 package.json      | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index b53e3004ab..e48d2dd220 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -4,7 +4,7 @@ os:
 dist: trusty
 language: node_js
 node_js:
-- "12"
+- "11"
 matrix:
   allow_failures:
 cache:
diff --git a/appveyor-appx.yml b/appveyor-appx.yml
index e3aa40b44b..afdc0f4ec6 100644
--- a/appveyor-appx.yml
+++ b/appveyor-appx.yml
@@ -30,7 +30,7 @@ init:
   - ps: ${env:APPVEYOR_REPO_COMMIT_SHORT} = (${env:APPVEYOR_REPO_COMMIT}).Substring(0, 8)
 
 install:
-  - ps: Install-Product node 12 x64
+  - ps: Install-Product node 11 x64
   - git reset --hard HEAD
   - node --version
   - npm i
diff --git a/appveyor.yml b/appveyor.yml
index 093f794a4c..e965ddf5ed 100644
--- a/appveyor.yml
+++ b/appveyor.yml
@@ -28,7 +28,7 @@ init:
   - git config --global core.autocrlf input
 
 install:
-  - ps: Install-Product node 12 x64
+  - ps: Install-Product node 11 x64
   - git reset --hard HEAD
   - node --version
   - npm i
diff --git a/package.json b/package.json
index c804e1e2bb..4bf3ed1452 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "splayer",
   "productName": "splayer",
   "homepage": "https://splayer.org",
-  "version": "4.3.1",
+  "version": "4.4.0-beta.0",
   "author": "tomasen <tomasen@gmail.com>",
   "description": "a media player",
   "license": "GPL-3.0-or-later",

From c65539e4a90da0e3db0bc8c4c83e77688e1be9af Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Fri, 6 Sep 2019 19:27:36 +0800
Subject: [PATCH 111/123] fix(browsingview): fix windows titlebar

---
 src/renderer/App.vue                                   | 7 ++++++-
 src/renderer/components/BrowsingView/BrowsingInput.vue | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index cda903af73..04ea924fc1 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -5,7 +5,7 @@
     class="application"
   >
     <Titlebar
-      v-if="$route.name !== 'playing-view'"
+      v-if="!($route.name === 'playing-view' || ($route.name === 'browsing-view' && !isDarwin))"
       :is-landing-view="$route.name === 'landing-view'"
       :is-browsing-view="$route.name === 'browsing-view'"
       :show-sidebar="showSidebar"
@@ -57,6 +57,11 @@ export default {
       currentUrl: '',
     };
   },
+  computed: {
+    isDarwin() {
+      return process.platform === 'darwin';
+    },
+  },
   watch: {
     $route(to: any, from: any) {
       if (to.name === 'landing-view' && from.name === 'language-setting') this.transitionMode = 'fade';
diff --git a/src/renderer/components/BrowsingView/BrowsingInput.vue b/src/renderer/components/BrowsingView/BrowsingInput.vue
index 45e9f2a32d..2d4911f460 100644
--- a/src/renderer/components/BrowsingView/BrowsingInput.vue
+++ b/src/renderer/components/BrowsingView/BrowsingInput.vue
@@ -92,7 +92,7 @@ export default {
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  width: 100%;
+  width: calc(100% - 176px);
   height: 40px;
   z-index: 6;
   .url-search {

From d66f9fbf4168f26962a7bfca137f48d8ad17d73a Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Fri, 6 Sep 2019 19:40:44 +0800
Subject: [PATCH 112/123] fix(browsingveiw): fix touchbar state

---
 src/renderer/components/BrowsingView.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index bd3868be2b..1c3295f7d3 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -203,6 +203,7 @@ export default {
     },
     hasVideo(val: boolean) {
       this.updatePipState(val);
+      this.createTouchBar(val);
     },
     adaptFinished(val: boolean) {
       if (val) {
@@ -313,6 +314,7 @@ export default {
     },
   },
   created() {
+    this.createTouchBar(false);
     this.$electron.ipcRenderer.send('callMainWindowMethod', 'setMinimumSize', [
       570,
       375,
@@ -432,6 +434,7 @@ export default {
               },
             );
         }
+        this.createTouchBar(this.webInfo.hasVideo);
       },
     );
   },
@@ -746,13 +749,13 @@ export default {
         click: () => {},
       });
       this.backwardButton = new TouchBarButton({
-        icon: this.createIcon(`touchBar/${this.$refs.webView.canGoBack() ? 'backward' : 'backward-disabled'}.png`),
+        icon: this.createIcon(`touchBar/${this.webInfo.canGoBack ? 'backward' : 'backward-disabled'}.png`),
         click: () => {
           this.$bus.$emit('toggle-back');
         },
       });
       this.forwardButton = new TouchBarButton({
-        icon: this.createIcon(`touchBar/${this.$refs.webView.canGoForward() ? 'forward' : 'forward-disabled'}.png`),
+        icon: this.createIcon(`touchBar/${this.webInfo.canGoForward ? 'forward' : 'forward-disabled'}.png`),
         click: () => {
           this.$bus.$emit('toggle-forward');
         },

From 822d949063ccdd3baa907ee67aa6a4178e94be2c Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Fri, 6 Sep 2019 19:44:29 +0800
Subject: [PATCH 113/123] style(Landingview): fix sidebar animation

---
 src/renderer/containers/LandingView.vue | 29 +------------------------
 1 file changed, 1 insertion(+), 28 deletions(-)

diff --git a/src/renderer/containers/LandingView.vue b/src/renderer/containers/LandingView.vue
index e2756d3d2f..b8d0efe875 100644
--- a/src/renderer/containers/LandingView.vue
+++ b/src/renderer/containers/LandingView.vue
@@ -5,7 +5,7 @@
       :open-input-url="openInputUrl"
       :close-url-input="closeUrlInput"
     />
-    <transition name="background-container-transition">
+    <transition name="basidebckground-container-transition">
       <div
         v-if="item.backgroundUrl"
         class="background"
@@ -455,33 +455,6 @@ export default {
 $themeColor-Light: white;
 
 .landing-view {
-  height: 100vh;
-  width: 100vw;
-}
-.side-bar {
-  position: absolute;
-  background-color: #3B3B41;
-  z-index: 0;
-  left: 0;
-  height: 100%;
-  transition: width 100ms ease-out;
-  will-change: width;
-
-  .icon-box {
-    width: 40px;
-    margin-top: 46px;
-    margin-left: 18px;
-    margin-right: 18px;
-    display: flex;
-    flex-direction: column;
-    div {
-      width: 40px;
-      height: 40px;
-      margin-bottom: 16px;
-    }
-  }
-}
-.wrapper {
   overflow: hidden;
   will-change: width;
   transition-property: width;

From 3db4bd011950a845a7be4e1511a58e7fd5111c73 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Fri, 6 Sep 2019 19:51:48 +0800
Subject: [PATCH 114/123] fix(browsingview): fix touchbar sidebar not work in
 browsingview

---
 src/renderer/components/BrowsingView.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 1c3295f7d3..5ec3534a40 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -746,7 +746,9 @@ export default {
 
       this.sidebarButton = new TouchBarButton({
         icon: this.createIcon('touchBar/sidebar.png'),
-        click: () => {},
+        click: () => {
+          this.$event.emit('side-bar-mouseup');
+        },
       });
       this.backwardButton = new TouchBarButton({
         icon: this.createIcon(`touchBar/${this.webInfo.canGoBack ? 'backward' : 'backward-disabled'}.png`),

From 77b2c43cf1c3d21b975d38a95308f633df09bd26 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Fri, 6 Sep 2019 19:59:03 +0800
Subject: [PATCH 115/123] style(browsingview): remove pip touchbar

---
 src/renderer/components/BrowsingView.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 5ec3534a40..7a01f7b0a3 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -740,7 +740,7 @@ export default {
         }
       }
     },
-    createTouchBar(enablePip: boolean) {
+    createTouchBar() {
       const { TouchBar } = this.$electron.remote;
       const { TouchBarButton, TouchBarSpacer } = TouchBar;
 
@@ -768,12 +768,12 @@ export default {
           this.$bus.$emit('toggle-reload');
         },
       });
-      this.pipButton = enablePip ? new TouchBarButton({
-        icon: this.createIcon('touchBar/pip.png'),
-        click: () => {
-          this.$bus.$emit('toggle-pip');
-        },
-      }) : null;
+      // this.pipButton = enablePip ? new TouchBarButton({
+      //   icon: this.createIcon('touchBar/pip.png'),
+      //   click: () => {
+      //     this.$bus.$emit('toggle-pip');
+      //   },
+      // }) : null;
       const touchbarItems = [
         this.sidebarButton,
         new TouchBarSpacer({ size: 'large' }),
@@ -782,7 +782,7 @@ export default {
         this.refreshButton,
         new TouchBarSpacer({ size: 'large' }),
       ];
-      if (enablePip) touchbarItems.push(this.pipButton);
+      // if (enablePip) touchbarItems.push(this.pipButton);
       this.touchBar = new TouchBar({ items: touchbarItems });
       this.$electron.remote.getCurrentWindow().setTouchBar(this.touchBar);
     },

From 42ebd1af6a08b94392c2c22859b9783ad862def3 Mon Sep 17 00:00:00 2001
From: Sin <dev@zouxin.net>
Date: Sat, 7 Sep 2019 05:54:04 +0800
Subject: [PATCH 116/123] build(appveyor): use node 12 for Windows build

---
 appveyor-appx.yml | 2 +-
 appveyor.yml      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/appveyor-appx.yml b/appveyor-appx.yml
index afdc0f4ec6..e3aa40b44b 100644
--- a/appveyor-appx.yml
+++ b/appveyor-appx.yml
@@ -30,7 +30,7 @@ init:
   - ps: ${env:APPVEYOR_REPO_COMMIT_SHORT} = (${env:APPVEYOR_REPO_COMMIT}).Substring(0, 8)
 
 install:
-  - ps: Install-Product node 11 x64
+  - ps: Install-Product node 12 x64
   - git reset --hard HEAD
   - node --version
   - npm i
diff --git a/appveyor.yml b/appveyor.yml
index e965ddf5ed..093f794a4c 100644
--- a/appveyor.yml
+++ b/appveyor.yml
@@ -28,7 +28,7 @@ init:
   - git config --global core.autocrlf input
 
 install:
-  - ps: Install-Product node 11 x64
+  - ps: Install-Product node 12 x64
   - git reset --hard HEAD
   - node --version
   - npm i

From fb6872f53859e643cfda84bb64a71b66221d3405 Mon Sep 17 00:00:00 2001
From: Sin <dev@zouxin.net>
Date: Sat, 7 Sep 2019 06:05:05 +0800
Subject: [PATCH 117/123] build(electron): upgrade electron to 5.0.10-dev.5

---
 appveyor-appx.yml | 6 ------
 appveyor.yml      | 6 ------
 package.json      | 2 +-
 3 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/appveyor-appx.yml b/appveyor-appx.yml
index e3aa40b44b..c09992045c 100644
--- a/appveyor-appx.yml
+++ b/appveyor-appx.yml
@@ -18,12 +18,6 @@ platform:
 
 configuration: Release
 
-cache:
-  - node_modules
-  - '%APPDATA%\npm-cache'
-  - '%USERPROFILE%\.electron'
-  - '%USERPROFILE%\AppData\Local\Yarn\cache'
-
 init:
   - git config --global core.autocrlf input
   # Provide a short commit SHA1 too
diff --git a/appveyor.yml b/appveyor.yml
index 093f794a4c..557e670b3b 100644
--- a/appveyor.yml
+++ b/appveyor.yml
@@ -18,12 +18,6 @@ platform:
 
 configuration: Release
 
-cache:
-  - node_modules
-  - '%APPDATA%\npm-cache'
-  - '%USERPROFILE%\.electron'
-  - '%USERPROFILE%\AppData\Local\Yarn\cache'
-
 init:
   - git config --global core.autocrlf input
 
diff --git a/package.json b/package.json
index 1c6b58eeec..e09d18b7ba 100644
--- a/package.json
+++ b/package.json
@@ -108,7 +108,7 @@
     "@babel/plugin-syntax-import-meta": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/register": "^7.0.0",
-    "@chiflix/electron": "5.0.7-dev.1",
+    "@chiflix/electron": "5.0.10-dev.5",
     "@sentry/webpack-plugin": "^1.6.2",
     "@types/chai": "^4.1.7",
     "@types/mkdirp": "^0.5.2",

From 60f3641fa55bdea37780c7644d2a589930f2de16 Mon Sep 17 00:00:00 2001
From: Yan Yifeng <yanyifeng@splayer.org>
Date: Mon, 9 Sep 2019 13:49:25 +0800
Subject: [PATCH 118/123] refactor(db): remove useless interfaces

Remove previous verison's DBSchema.
---
 src/renderer/services/storage/subtitle/db.ts | 64 +++-----------------
 1 file changed, 10 insertions(+), 54 deletions(-)

diff --git a/src/renderer/services/storage/subtitle/db.ts b/src/renderer/services/storage/subtitle/db.ts
index dca3190195..1f56af33e7 100644
--- a/src/renderer/services/storage/subtitle/db.ts
+++ b/src/renderer/services/storage/subtitle/db.ts
@@ -4,53 +4,11 @@ import {
 } from 'lodash';
 import { LanguageCode } from '@/libs/language';
 import { DATADB_NAME } from '@/constants';
+import { Format, IOrigin, IRawVideoSegment } from '@/interfaces/ISubtitle';
 import {
-  Type, Format, IOrigin, IRawVideoSegment,
-} from '@/interfaces/ISubtitle';
-import {
-  IStoredSubtitle, IStoredSubtitleItem, ISubtitlePreference, SelectedSubtitle, IPrimarySecondary,
+  IStoredSubtitle, IStoredSubtitleItem, ISubtitlePreference, SelectedSubtitle,
 } from '@/interfaces/ISubtitleStorage';
 
-interface IDataDBV3 extends DBSchema {
-  'subtitles': {
-    key: string;
-    value: IStoredSubtitle;
-  };
-  'preferences': {
-    key: number;
-    value: ISubtitlePreference;
-    indexes: {
-      'byPlaylist': number,
-      'byMediaItem': string,
-    },
-  };
-}
-interface IDataDBV4 extends DBSchema {
-  'subtitles': {
-    key: string;
-    value: {
-      hash: string;
-      source: IOrigin[];
-      format: Format;
-      language: LanguageCode;
-    };
-  };
-  'subtitle-preferences': {
-    key: string;
-    value: {
-      mediaHash: string;
-      list: {
-        hash: string;
-        type: Type;
-        source: unknown;
-        videoSegments?: IRawVideoSegment[];
-        delay: number;
-      }[];
-      language: IPrimarySecondary<LanguageCode>;
-      selected: IPrimarySecondary<SelectedSubtitle>;
-    };
-  };
-}
 interface IDataDBV5 extends DBSchema {
   'subtitles': {
     key: string;
@@ -95,18 +53,16 @@ export class SubtitleDataBase {
         5,
         {
           async upgrade(db, version) {
-            if (version > 0 && version < 3) {
+            if (version > 0 && version < 5) {
               db.deleteObjectStore('subtitles');
-              db.createObjectStore('subtitles', { keyPath: 'hash' });
-            } else if (version === 3) {
-              const v3Db = db as unknown as IDBPDatabase<IDataDBV3>;
-              v3Db.deleteObjectStore('subtitles');
-              v3Db.deleteObjectStore('preferences');
-            } else if (version === 4) {
-              const v4Db = db as unknown as IDBPDatabase<IDataDBV4>;
-              v4Db.deleteObjectStore('subtitles');
-              v4Db.deleteObjectStore('subtitle-preferences');
             }
+            if (version === 3) {
+              db.deleteObjectStore('preferences' as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+            }
+            if (version === 4) {
+              db.deleteObjectStore('subtitle-preferences');
+            }
+
             db.createObjectStore('subtitles', { keyPath: 'hash' });
             db.createObjectStore('subtitle-preferences', { keyPath: 'mediaHash' });
           },

From b65f8bfba3befa50e883b4506f44c1381f03e667 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Mon, 9 Sep 2019 14:43:23 +0800
Subject: [PATCH 119/123] feat(browsing): feat back to landing view window
 control

---
 src/renderer/components/BrowsingView.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 7a01f7b0a3..de98f2765e 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -456,7 +456,9 @@ export default {
         window.removeEventListener('focus', this.focusHandler);
         if (this.backToLandingView) {
           this.$electron.ipcRenderer.send('remove-browser');
-          windowRectService.uploadWindowBy(false, 'landing-view');
+          setTimeout(() => {
+            windowRectService.uploadWindowBy(false, 'landing-view', undefined, undefined, this.winSize, this.winPos, this.isFullScreen);
+          }, 200);
         }
       });
   },

From 91caa4e75f168da295a23589ab3b150fb0b42d50 Mon Sep 17 00:00:00 2001
From: Sin <dev@zouxin.net>
Date: Mon, 9 Sep 2019 14:54:58 +0800
Subject: [PATCH 120/123] build(travis): use node 12  to build on mac

---
 .travis.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index e48d2dd220..b53e3004ab 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -4,7 +4,7 @@ os:
 dist: trusty
 language: node_js
 node_js:
-- "11"
+- "12"
 matrix:
   allow_failures:
 cache:

From a8af8e6f085d759631ffca44f3b8d0a44b721d0f Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Mon, 9 Sep 2019 15:07:04 +0800
Subject: [PATCH 121/123] feat(browsing): maxmize & restore

---
 .../assets/icon/browsingrestore-default-icon.svg | 10 ++++++++++
 .../components/BrowsingView/BrowsingTitleBar.vue | 16 ++++++++++++----
 2 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100755 src/renderer/assets/icon/browsingrestore-default-icon.svg

diff --git a/src/renderer/assets/icon/browsingrestore-default-icon.svg b/src/renderer/assets/icon/browsingrestore-default-icon.svg
new file mode 100755
index 0000000000..1fd919b718
--- /dev/null
+++ b/src/renderer/assets/icon/browsingrestore-default-icon.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>menuBar/__icon/--restore</title>
+    <desc>Created with Sketch.</desc>
+    <g id="menuBar/__icon/--restore" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M19.3,19.5 C18.8581722,19.5 18.5,19.1418278 18.5,18.7 C18.5,18.2581722 18.8581722,17.9 19.3,17.9 L20.899,17.899 L20.899,9.1 L12.1,9.1 L12.1,10.7 C12.1,11.1418278 11.7418278,11.5 11.3,11.5 C10.8581722,11.5 10.5,11.1418278 10.5,10.7 L10.5,8.3 C10.5,7.8581722 10.8581722,7.5 11.3,7.5 L21.699,7.5 L21.7,7.5 C22.1418278,7.5 22.5,7.8581722 22.5,8.3 L22.5,18.7 L22.5,18.7 C22.5,19.107841 22.1948119,19.4444016 21.8003503,19.4937669 L21.7,19.5 L21.7,19.5 L19.3,19.5 Z" id="形状结合" fill="#7E808F" fill-rule="nonzero"></path>
+        <path d="M8.3,22.5 C7.8581722,22.5 7.5,22.1418278 7.5,21.7 L7.5,11.3 C7.5,10.8581722 7.8581722,10.5 8.3,10.5 L18.699,10.5 L18.7,10.5 C19.1418278,10.5 19.5,10.8581722 19.5,11.3 L19.5,21.7 L19.5,21.7 C19.5,22.107841 19.1948119,22.4444016 18.8003503,22.4937669 L18.7,22.5 L18.7,22.5 L8.3,22.5 Z M17.899,20.899 L17.899,12.1 L9.1,12.1 L9.1,20.899 L17.899,20.899 Z" id="形状结合" fill="#7E808F" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/components/BrowsingView/BrowsingTitleBar.vue b/src/renderer/components/BrowsingView/BrowsingTitleBar.vue
index 7be4b4da1f..1aa0ded7f5 100644
--- a/src/renderer/components/BrowsingView/BrowsingTitleBar.vue
+++ b/src/renderer/components/BrowsingView/BrowsingTitleBar.vue
@@ -11,12 +11,12 @@
       />
     </div>
     <div
-      @mouseup="handleFullScreen"
+      @mouseup="handleMiddleButton"
       class="control-button fullscreen-icon button-hover"
     >
       <Icon
         ref="back"
-        type="browsingfullscreen"
+        :type="isMaximized ? 'browsingrestore' : 'browsingfullscreen'"
       />
     </div>
     <div
@@ -32,17 +32,25 @@
 </template>
 <script lang="ts">
 import Icon from '@/components/BaseIconContainer.vue';
+import { mapGetters } from 'vuex';
 
 export default {
   components: {
     Icon,
   },
+  computed:  {
+    ...mapGetters(['isMaximized']),
+  },
   methods: {
     handleMinimize() {
       this.$electron.ipcRenderer.send('callMainWindowMethod', 'minimize');
     },
-    handleFullScreen() {
-      this.$electron.ipcRenderer.send('callMainWindowMethod', 'maximize');
+    handleMiddleButton() {
+      if (this.isMaximized) {
+        this.$electron.ipcRenderer.send('callMainWindowMethod', 'unmaximize');
+      } else {
+        this.$electron.ipcRenderer.send('callMainWindowMethod', 'maximize');
+      }
     },
     handleClose() {
       this.$electron.ipcRenderer.send('callMainWindowMethod', 'close');

From 649aa5dad2991cead54d673f84745da4d9152112 Mon Sep 17 00:00:00 2001
From: Tan Yang <1029862865@qq.com>
Date: Mon, 9 Sep 2019 15:14:58 +0800
Subject: [PATCH 122/123] fix(browsingview): fix maximize in windows and reload
 function

---
 src/main/helpers/BrowserViewManager.ts   | 132 +++++++++++++----------
 src/main/index.js                        |  18 +++-
 src/renderer/components/BrowsingPip.vue  |  38 ++++---
 src/renderer/components/BrowsingView.vue |  25 ++---
 src/renderer/components/Titlebar.vue     |   1 -
 5 files changed, 121 insertions(+), 93 deletions(-)

diff --git a/src/main/helpers/BrowserViewManager.ts b/src/main/helpers/BrowserViewManager.ts
index 1f6c45d270..413ad89234 100644
--- a/src/main/helpers/BrowserViewManager.ts
+++ b/src/main/helpers/BrowserViewManager.ts
@@ -5,54 +5,58 @@ import { bilibiliVideoPause, bilibiliFindType } from '../../shared/pip/bilibili'
 type ChannelData = {
   currentIndex: number,
   lastUpdateTime: number,
-  list: BrowserViewHistory[]
+  list: BrowserViewHistoryItem[]
 }
 
-type BrowserViewHistory = {
+type BrowserViewHistoryItem = {
   url: string,
   view: BrowserView
 }
 
 export class BrowserViewManager implements IBrowserViewManager {
-  private history: Map<string, ChannelData>;
+  private historyByChannel: Map<string, ChannelData>;
 
   private currentChannel: string;
 
+  // 当前画中画BrowserView的info
   private currentPip: {
     pipIndex: number,
     pipChannel: string,
-    pipPage: BrowserViewHistory | null,
+    pipPage: BrowserViewHistoryItem | null,
   };
 
-  private backPage: BrowserViewHistory[];
+  // 浏览器中后退操作所记录下来的BrowserView
+  private history: BrowserViewHistoryItem[];
 
   public constructor() {
-    this.history = new Map();
+    this.historyByChannel = new Map();
     this.currentPip = {
       pipIndex: -1,
       pipChannel: '',
       pipPage: null,
     };
-    this.backPage = [];
+    this.history = [];
   }
 
   public create(channel: string, args: { url: string, isNewWindow?: boolean }): BrowserViewData {
     // 初始化频道数据
-    if (!this.history[channel]) {
-      this.history[channel] = {
+    if (!this.historyByChannel[channel]) {
+      this.historyByChannel[channel] = {
         currentIndex: 0,
         lastUpdateTime: Date.now(),
         list: [],
       };
     }
 
-    // load URL
-    const index = this.history[channel].currentIndex;
-    const lastUrl = this.history[channel].list.length
-      ? this.history[channel].list[index].url : args.url;
-    if (this.history[channel].list.length) {
-      this.history[channel].list[index].url = args.url;
-      if (args.isNewWindow) this.history[channel].list[index].view.webContents.loadURL(args.url);
+    // 当前BrowserView更新url
+    const index = this.historyByChannel[channel].currentIndex;
+    const lastUrl = this.historyByChannel[channel].list.length
+      ? this.historyByChannel[channel].list[index].url : args.url;
+    if (this.historyByChannel[channel].list.length) {
+      this.historyByChannel[channel].list[index].url = args.url;
+      if (args.isNewWindow) {
+        this.historyByChannel[channel].list[index].view.webContents.loadURL(args.url);
+      }
     }
 
     // 创建上一个view数据
@@ -65,10 +69,10 @@ export class BrowserViewManager implements IBrowserViewManager {
         },
       }),
     };
-    // loadURL
+    // 新建BrowserView Load Url以及禁止视频自动播放
     page.view.webContents.loadURL(page.url);
     if (channel === this.currentChannel) {
-      const hasLastPage = this.history[channel].list.length;
+      const hasLastPage = this.historyByChannel[channel].list.length;
       if (hasLastPage) {
         page.view.webContents.once('media-started-playing', () => {
           if (lastUrl !== page.url) return;
@@ -86,69 +90,74 @@ export class BrowserViewManager implements IBrowserViewManager {
       }
     }
 
-    // 暂停当前视频
+    // 清空后退操作产生的history以及切换频道时暂停视频
     if (this.currentChannel) {
       if (channel !== this.currentChannel) {
-        const currentIndex = this.history[this.currentChannel].currentIndex;
-        const view = this.history[this.currentChannel].list[currentIndex].view;
+        const currentIndex = this.historyByChannel[this.currentChannel].currentIndex;
+        const view = this.historyByChannel[this.currentChannel].list[currentIndex].view;
         this.pauseVideo(view);
-      } else if (this.backPage.length) {
+      } else if (this.history.length) {
         // 清除后退的记录
-        remove(this.history[this.currentChannel].list,
-          (list: BrowserViewHistory) => {
-            if (this.backPage.includes(list)) {
+        remove(this.historyByChannel[this.currentChannel].list,
+          (list: BrowserViewHistoryItem) => {
+            if (this.history.includes(list)) {
               list.view.destroy();
               return true;
             }
             return false;
           });
-        this.backPage = [];
+        this.history = [];
       }
     }
 
     // 插入view到当前view的上一个位置
-    this.history[channel].list.splice(index, 0, page);
-    this.history[channel].currentIndex = this.history[channel].list.length - 1;
-    this.history[channel].lastUpdateTime = Date.now();
+    this.historyByChannel[channel].list.splice(index, 0, page);
+    this.historyByChannel[channel].currentIndex = this.historyByChannel[channel].list.length - 1;
+    this.historyByChannel[channel].lastUpdateTime = Date.now();
     this.currentChannel = channel;
     return {
-      canBack: this.history[channel].list.length > 1,
+      canBack: this.historyByChannel[channel].list.length > 1,
       canForward: false,
       view: page.view,
     };
   }
 
+  // 浏览器后退
   public back(): BrowserViewData {
-    const index = this.history[this.currentChannel].currentIndex;
-    this.backPage.push(this.history[this.currentChannel].list[index]);
+    const index = this.historyByChannel[this.currentChannel].currentIndex;
+    this.history.push(this.historyByChannel[this.currentChannel].list[index]);
     return this.jump(true);
   }
 
+  // 浏览器前进
   public forward(): BrowserViewData {
-    if (this.backPage.length) {
-      this.backPage.pop();
+    if (this.history.length) {
+      this.history.pop();
     }
     return this.jump(false);
   }
 
+  // 浏览器切换频道
   public changeChanel(channel: string,
     args: { url: string, isNewWindow?: boolean }): BrowserViewData {
-    if (!this.history[channel]) {
+    if (!this.historyByChannel[channel]) {
       return this.create(channel, args);
     }
     this.pauseVideo();
     this.currentChannel = channel;
-    this.history[channel].lastUpdateTime = Date.now();
+    this.historyByChannel[channel].lastUpdateTime = Date.now();
     return {
-      canBack: this.history[channel].currentIndex > 0,
-      canForward: this.history[channel].currentIndex < this.history[channel].list.length - 1,
-      page: this.history[channel].list[this.history[channel].currentIndex],
+      canBack: this.historyByChannel[channel].currentIndex > 0,
+      canForward: this.historyByChannel[channel].currentIndex
+        < this.historyByChannel[channel].list.length - 1,
+      page: this.historyByChannel[channel].list[this.historyByChannel[channel].currentIndex],
     };
   }
 
+  // 进入画中画
   public enterPip(): { pipBrowser: BrowserView; mainBrowser: BrowserViewData } {
-    const currentIndex = this.history[this.currentChannel].currentIndex;
-    const list = this.history[this.currentChannel].list;
+    const currentIndex = this.historyByChannel[this.currentChannel].currentIndex;
+    const list = this.historyByChannel[this.currentChannel].list;
     const pipBrowser = list[currentIndex].view;
     const mainBrowser = {
       canBack: currentIndex - 1 > 0,
@@ -158,26 +167,27 @@ export class BrowserViewManager implements IBrowserViewManager {
     this.currentPip = {
       pipIndex: currentIndex,
       pipChannel: this.currentChannel,
-      pipPage: this.history[this.currentChannel].list.splice(currentIndex, 1)[0],
+      pipPage: this.historyByChannel[this.currentChannel].list.splice(currentIndex, 1)[0],
     };
-    this.history[this.currentChannel].list.splice(currentIndex, 1);
-    this.history[this.currentChannel].lastUpdateTime = Date.now();
-    this.history[this.currentChannel].currentIndex = currentIndex - 1;
+    this.historyByChannel[this.currentChannel].list.splice(currentIndex, 1);
+    this.historyByChannel[this.currentChannel].lastUpdateTime = Date.now();
+    this.historyByChannel[this.currentChannel].currentIndex = currentIndex - 1;
     return { pipBrowser, mainBrowser };
   }
 
+  // 退出画中画
   public exitPip(): BrowserViewData {
     const { pipIndex, pipChannel } = this.currentPip;
-    const list = this.history[pipChannel].list;
-    this.history[pipChannel].list = list
-      .filter((page: BrowserViewHistory, index: number) => index < pipIndex);
+    const list = this.historyByChannel[pipChannel].list;
+    this.historyByChannel[pipChannel].list = list
+      .filter((page: BrowserViewHistoryItem, index: number) => index < pipIndex);
     const deleteList = list.slice(pipIndex, list.length);
-    deleteList.forEach((page: BrowserViewHistory) => {
+    deleteList.forEach((page: BrowserViewHistoryItem) => {
       page.view.destroy();
     });
-    this.history[pipChannel].list.push(this.currentPip.pipPage);
-    this.history[pipChannel].currentIndex = pipIndex;
-    this.history[pipChannel].lastUpdateTime = Date.now();
+    this.historyByChannel[pipChannel].list.push(this.currentPip.pipPage);
+    this.historyByChannel[pipChannel].currentIndex = pipIndex;
+    this.historyByChannel[pipChannel].lastUpdateTime = Date.now();
     this.currentChannel = pipChannel;
     this.currentPip = {
       pipIndex: -1,
@@ -185,24 +195,27 @@ export class BrowserViewManager implements IBrowserViewManager {
       pipPage: null,
     };
     return {
-      canBack: this.history[this.currentChannel].currentIndex > 0,
+      canBack: this.historyByChannel[this.currentChannel].currentIndex > 0,
       canForward: false,
-      page: this.history[this.currentChannel].list[this.history[this.currentChannel].currentIndex],
+      page: this.historyByChannel[this.currentChannel]
+        .list[this.historyByChannel[this.currentChannel].currentIndex],
     };
   }
 
+  // 在画中画模式下切换画中画
   public changePip(channel: string): { pipBrowser: Electron.BrowserView;
     mainBrowser: BrowserViewData } {
     this.currentChannel = channel;
-    this.pauseVideo((this.currentPip.pipPage as BrowserViewHistory).view,
+    this.pauseVideo((this.currentPip.pipPage as BrowserViewHistoryItem).view,
       this.currentPip.pipChannel);
     return this.enterPip();
   }
 
+  // 暂停当前BrowserView下的视频
   public pauseVideo(view?: BrowserView, currentChannel?: string): void {
     const pausedChannel = currentChannel || this.currentChannel;
-    const currentIndex = this.history[this.currentChannel].currentIndex;
-    const currentView = view || this.history[this.currentChannel].list[currentIndex].view;
+    const currentIndex = this.historyByChannel[this.currentChannel].currentIndex;
+    const currentView = view || this.historyByChannel[this.currentChannel].list[currentIndex].view;
     if (currentView.webContents.isCurrentlyAudible()) {
       if (pausedChannel.includes('bilibili')) {
         let type = '';
@@ -217,6 +230,7 @@ export class BrowserViewManager implements IBrowserViewManager {
     }
   }
 
+  // 关闭画中画窗口
   public pipClose(): void {
     if (this.currentPip.pipPage) this.currentPip.pipPage.view.destroy();
     this.currentPip.pipIndex = -1;
@@ -226,7 +240,7 @@ export class BrowserViewManager implements IBrowserViewManager {
 
   private jump(left: boolean): BrowserViewData {
     this.pauseVideo();
-    const channel: ChannelData = this.history[this.currentChannel];
+    const channel: ChannelData = this.historyByChannel[this.currentChannel];
     const result: BrowserViewData = {
       canBack: false,
       canForward: false,
@@ -249,7 +263,7 @@ export class BrowserViewManager implements IBrowserViewManager {
 export type BrowserViewData = {
   canBack: boolean,
   canForward: boolean,
-  page?: BrowserViewHistory
+  page?: BrowserViewHistoryItem
   view?: BrowserView,
 }
 
diff --git a/src/main/index.js b/src/main/index.js
index 66a8c9d45a..9880451308 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -71,6 +71,7 @@ let browsingWindow = null;
 let browserViewManager = null;
 let pipControlView = null;
 let titlebarView = null;
+let isBrowsingWindowMax = false;
 let tray = null;
 let pipTimer = 0;
 let needToRestore = false;
@@ -662,8 +663,10 @@ function registerMainWindowEvent(mainWindow) {
       case 'max':
         if (browsingWindow.isMaximized()) {
           browsingWindow.unmaximize();
+          isBrowsingWindowMax = false;
         } else {
           browsingWindow.maximize();
+          isBrowsingWindowMax = true;
           if (process.platform === 'win32') {
             titlebarView.webContents.executeJavaScript('document.querySelector(".titlebarMax").style.display = "none";'
               + 'document.querySelector(".titlebarUnMax").style.display = "block";'
@@ -673,6 +676,7 @@ function registerMainWindowEvent(mainWindow) {
         break;
       case 'unmax':
         browsingWindow.unmaximize();
+        isBrowsingWindowMax = false;
         if (process.platform === 'win32') {
           titlebarView.webContents.executeJavaScript('document.querySelector(".titlebarMax").style.display = "block";'
             + 'document.querySelector(".titlebarUnMax").style.display = "none";'
@@ -852,10 +856,22 @@ function registerMainWindowEvent(mainWindow) {
         mainWindow.unmaximize();
       }
     } else if (browsingWindow && browsingWindow.isFocused()) {
-      if (!browsingWindow.isMaximized()) {
+      if (!isBrowsingWindowMax) {
         browsingWindow.maximize();
+        isBrowsingWindowMax = true;
+        if (process.platform === 'win32') {
+          titlebarView.webContents.executeJavaScript('document.querySelector(".titlebarMax").style.display = "none";'
+            + 'document.querySelector(".titlebarUnMax").style.display = "block";'
+            + 'document.querySelector(".titlebarRecover").style.display = "none";');
+        }
       } else {
         browsingWindow.unmaximize();
+        isBrowsingWindowMax = false;
+        if (process.platform === 'win32') {
+          titlebarView.webContents.executeJavaScript('document.querySelector(".titlebarMax").style.display = "block";'
+            + 'document.querySelector(".titlebarUnMax").style.display = "none";'
+            + 'document.querySelector(".titlebarRecover").style.display = "none";');
+        }
       }
     }
   });
diff --git a/src/renderer/components/BrowsingPip.vue b/src/renderer/components/BrowsingPip.vue
index 3f93615e93..11d6e3a8f1 100644
--- a/src/renderer/components/BrowsingPip.vue
+++ b/src/renderer/components/BrowsingPip.vue
@@ -64,29 +64,27 @@ export default {
     });
     window.addEventListener('focus', () => {
       electron.remote.getCurrentWindow().getBrowserViews()[0].webContents.focus();
+      const cursorPoint = electron.remote.screen.getCursorScreenPoint();
+      const windowPos = electron.remote.getCurrentWindow().getPosition();
+      this.offset = [cursorPoint.x - windowPos[0], cursorPoint.y - windowPos[1]];
+      if (this.getRatio() !== 1) {
+        this.windowSize = electron.remote.getCurrentWindow().getSize();
+      }
     });
     electron.ipcRenderer.on('mouse-left-drag', (evt: Event, x: number, y: number) => {
-      if (!this.offset || !this.offset.length) {
-        const cursorPoint = electron.remote.screen.getCursorScreenPoint();
-        const windowPos = electron.remote.getCurrentWindow().getPosition();
-        this.offset = [cursorPoint.x - windowPos[0], cursorPoint.y - windowPos[1]];
-        if (this.getRatio() !== 1) {
-          this.windowSize = electron.remote.getCurrentWindow().getSize();
-        }
+      if (!this.offset || !this.offset.length) return;
+      x = Math.round((x / this.getRatio()) - this.offset[0]) === 0
+        ? 0 : Math.round((x / this.getRatio()) - this.offset[0]);
+      y = Math.round((y / this.getRatio()) - this.offset[1]) === 0
+        ? 0 : Math.round((y / this.getRatio()) - this.offset[1]);
+      if (this.isDarwin) {
+        electron.ipcRenderer.send('callBrowsingWindowMethod', 'setPosition', [x, y]);
+      } else if (this.windowSize) {
+        electron.ipcRenderer.send('callBrowsingWindowMethod', 'setBounds', [{
+          x, y, width: this.windowSize[0], height: this.windowSize[1],
+        }]);
       } else {
-        x = Math.round((x / this.getRatio()) - this.offset[0]) === 0
-          ? 0 : Math.round((x / this.getRatio()) - this.offset[0]);
-        y = Math.round((y / this.getRatio()) - this.offset[1]) === 0
-          ? 0 : Math.round((y / this.getRatio()) - this.offset[1]);
-        if (this.isDarwin) {
-          electron.ipcRenderer.send('callBrowsingWindowMethod', 'setPosition', [x, y]);
-        } else if (this.windowSize) {
-          electron.ipcRenderer.send('callBrowsingWindowMethod', 'setBounds', [{
-            x, y, width: this.windowSize[0], height: this.windowSize[1],
-          }]);
-        } else {
-          electron.ipcRenderer.send('callBrowsingWindowMethod', 'setPosition', [x, y]);
-        }
+        electron.ipcRenderer.send('callBrowsingWindowMethod', 'setPosition', [x, y]);
       }
     });
     this.menuService = new MenuService();
diff --git a/src/renderer/components/BrowsingView.vue b/src/renderer/components/BrowsingView.vue
index 7a01f7b0a3..71fe59194c 100644
--- a/src/renderer/components/BrowsingView.vue
+++ b/src/renderer/components/BrowsingView.vue
@@ -484,12 +484,12 @@ export default {
       if (loadUrl.includes('youtube')) {
         channel = 'youtube.com';
       }
-      this.$electron.remote
-        .getCurrentWindow()
-        .getBrowserViews()[0]
-        .webContents.executeJavaScript(this.calculateVideoNum, (r: number) => {
+      const view = this.$electron.remote.getCurrentWindow().getBrowserViews()[0];
+      if (view) {
+        view.webContents.executeJavaScript(this.calculateVideoNum, (r: number) => {
           this.webInfo.hasVideo = channel === 'youtube.com' && !getVideoId(loadUrl).id ? false : !!r;
         });
+      }
     },
     beforeUnloadHandler(e: BeforeUnloadEvent) {
       this.removeListener();
@@ -892,14 +892,15 @@ export default {
       }
     },
     handleUrlReload() {
-      if (!this.isLoading) {
-        this.loadingState = true;
-        this.$electron.remote.getCurrentWindow()
-          .getBrowserViews()[0].webContents.reload();
-      } else {
-        this.loadingState = false;
-        this.$electron.remote.getCurrentWindow()
-          .getBrowserViews()[0].webContents.stop();
+      const view = this.$electron.remote.getCurrentWindow().getBrowserViews()[0];
+      if (view) {
+        if (!this.loadingState) {
+          this.loadingState = true;
+          view.webContents.reload();
+        } else {
+          this.loadingState = false;
+          view.webContents.stop();
+        }
       }
     },
     enterPipOperation() {
diff --git a/src/renderer/components/Titlebar.vue b/src/renderer/components/Titlebar.vue
index 5122318a39..872ee7d50d 100644
--- a/src/renderer/components/Titlebar.vue
+++ b/src/renderer/components/Titlebar.vue
@@ -16,7 +16,6 @@
         @mouseout.native="mouseoverSidebar = false"
         :mouseover="mouseoverSidebar"
         :fill="isBrowsingView ? '#BBBACC' : ''"
-        @mouseup.native="handleSidebar"
         :style="{
           transform: `translateX(${showSidebar ? '76' : '0'}px)`,
         }"

From 100c303c65e65b00386c726722799a3497fe55e4 Mon Sep 17 00:00:00 2001
From: YuRi Jin <875830716@qq.com>
Date: Mon, 9 Sep 2019 15:19:22 +0800
Subject: [PATCH 123/123] fix(browsing): lint fix

---
 src/renderer/components/BrowsingView/BrowsingTitleBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/BrowsingView/BrowsingTitleBar.vue b/src/renderer/components/BrowsingView/BrowsingTitleBar.vue
index 1aa0ded7f5..d766d47333 100644
--- a/src/renderer/components/BrowsingView/BrowsingTitleBar.vue
+++ b/src/renderer/components/BrowsingView/BrowsingTitleBar.vue
@@ -38,7 +38,7 @@ export default {
   components: {
     Icon,
   },
-  computed:  {
+  computed: {
     ...mapGetters(['isMaximized']),
   },
   methods: {