From e51f64037155c986ab992410bc1cd06f380ea2d2 Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Mon, 28 Mar 2022 09:41:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=A8=E5=85=A8=E5=B1=8F=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E4=B8=8B=E7=9A=84=E6=92=AD=E6=94=BE=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=E4=BB=8D=E4=BC=9A=E6=98=BE=E7=A4=BA=E9=80=80=E5=87=BA=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E8=AF=A6=E6=83=85=E9=A1=B5=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 publish/changeLog.md                          |  1 +
 src/lang/en-us.json                           |  1 +
 src/lang/zh-cn.json                           |  1 +
 src/lang/zh-tw.json                           |  1 +
 src/renderer/assets/svgs/fullscreen-exit.svg  |  3 +
 .../components/core/PlayDetail/index.vue      | 71 +++++++++++--------
 src/renderer/core/useApp/useEventListener.js  |  9 ++-
 src/renderer/event/names.js                   |  1 +
 8 files changed, 56 insertions(+), 32 deletions(-)
 create mode 100644 src/renderer/assets/svgs/fullscreen-exit.svg

diff --git a/publish/changeLog.md b/publish/changeLog.md
index b61d5f2d..5888f269 100644
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -7,6 +7,7 @@
 ### 优化
 
 - 优化播放详情页背景显示，现在有背景图片的主题可以在播放详情页显示它的图片了
+- 在全屏状态下的播放详情页仍会显示退出播放详情页按钮，同时在其旁边添加退出全屏按钮
 
 ### 修复
 
diff --git a/src/lang/en-us.json b/src/lang/en-us.json
index 63a800bc..1fdce610 100644
--- a/src/lang/en-us.json
+++ b/src/lang/en-us.json
@@ -53,6 +53,7 @@
   "download__runing": "Downloading",
   "download__status": "Status",
   "export": "Export",
+  "fullscreen_exit": "Exit Full Screen",
   "history_clear": "Clear History",
   "history_remove": "Right click to remove this entry",
   "history_search": "History Searches",
diff --git a/src/lang/zh-cn.json b/src/lang/zh-cn.json
index 37daa6b6..f5241d1d 100644
--- a/src/lang/zh-cn.json
+++ b/src/lang/zh-cn.json
@@ -53,6 +53,7 @@
   "download__runing": "正在下载",
   "download__status": "状态",
   "export": "导出",
+  "fullscreen_exit": "退出全屏",
   "history_clear": "清空搜索历史",
   "history_remove": "右击移除该历史",
   "history_search": "历史搜索",
diff --git a/src/lang/zh-tw.json b/src/lang/zh-tw.json
index dc8ac77b..d1781ce9 100644
--- a/src/lang/zh-tw.json
+++ b/src/lang/zh-tw.json
@@ -53,6 +53,7 @@
   "download__runing": "正在下載",
   "download__status": "狀態",
   "export": "導出",
+  "fullscreen_exit": "退出全屏",
   "history_clear": "清空搜索歷史",
   "history_remove": "右擊移除該歷史",
   "history_search": "歷史搜索",
diff --git a/src/renderer/assets/svgs/fullscreen-exit.svg b/src/renderer/assets/svgs/fullscreen-exit.svg
new file mode 100644
index 00000000..1f443d9b
--- /dev/null
+++ b/src/renderer/assets/svgs/fullscreen-exit.svg
@@ -0,0 +1,3 @@
+<svg style="width:24px;height:24px" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z" />
+</svg>
diff --git a/src/renderer/components/core/PlayDetail/index.vue b/src/renderer/components/core/PlayDetail/index.vue
index f709017b..1449558d 100644
--- a/src/renderer/components/core/PlayDetail/index.vue
+++ b/src/renderer/components/core/PlayDetail/index.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 transition(enter-active-class="animated lightSpeedIn" leave-active-class="animated slideOutDown" @after-enter="handleAfterEnter" @after-leave="handleAfterLeave")
-  div(:class="[$style.container, , { [$style.fullscreen]: isFullscreen }]" @contextmenu="handleContextMenu" v-if="isShowPlayerDetail")
+  div(:class="[$style.container, { [$style.fullscreen]: isFullscreen }]" @contextmenu="handleContextMenu" v-if="isShowPlayerDetail")
     div(:class="$style.bg")
     //- div(:class="$style.bg" :style="bgStyle")
     //- div(:class="$style.bg2")
@@ -9,6 +9,9 @@ transition(enter-active-class="animated lightSpeedIn" leave-active-class="animat
         button(type="button" :class="$style.hide" :aria-label="$t('player__hide_detail_tip')" @click="hide")
           svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='80%' viewBox='0 0 30.727 30.727' space='preserve')
             use(xlink:href='#icon-window-hide')
+        button(type="button" :class="$style.fullscreenExit" :aria-label="$t('fullscreen_exit')" @click="fullscreenExit")
+          svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%')
+            use(xlink:href='#icon-fullscreen-exit')
         button(type="button" :class="$style.min" :aria-label="$t('min')" @click="min")
           svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
             use(xlink:href='#icon-window-minimize')
@@ -22,6 +25,9 @@ transition(enter-active-class="animated lightSpeedIn" leave-active-class="animat
         button(type="button" :class="$style.hide" :aria-label="$t('player__hide_detail_tip')" @click="hide")
           svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='35%' viewBox='0 0 30.727 30.727' space='preserve')
             use(xlink:href='#icon-window-hide')
+        button(type="button" :class="$style.fullscreenExit" :aria-label="$t('fullscreen_exit')" @click="fullscreenExit")
+          svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='60%')
+            use(xlink:href='#icon-fullscreen-exit')
         button(type="button" :class="$style.min" :aria-label="$t('min')" @click="min")
           svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='60%' viewBox='0 0 24 24' space='preserve')
             use(xlink:href='#icon-window-minimize-2')
@@ -30,7 +36,6 @@ transition(enter-active-class="animated lightSpeedIn" leave-active-class="animat
         button(type="button" :class="$style.close" :aria-label="$t('close')" @click="close")
           svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='60%' viewBox='0 0 24 24' space='preserve')
             use(xlink:href='#icon-window-close-2')
-
     div(:class="[$style.main, {[$style.showComment]: isShowPlayComment}]")
       div.left(:class="$style.left")
         //- div(:class="$style.info")
@@ -120,6 +125,9 @@ export default {
       handleAfterLeave,
       visibled,
       isFullscreen,
+      fullscreenExit() {
+        window.eventHub.emit(eventBaseName.fullscreenToggle, false)
+      },
       min() {
         window.eventHub.emit(eventBaseName.min)
       },
@@ -167,8 +175,14 @@ export default {
   &.fullscreen {
     .header {
       -webkit-app-region: no-drag;
-      > * {
-        display: none;
+      align-self: flex-start;
+      .controBtn {
+        .close, .min {
+          display: none;
+        }
+        .fullscreenExit {
+          display: flex;
+        }
       }
     }
   }
@@ -214,6 +228,23 @@ export default {
     top: 0;
     display: flex;
     -webkit-app-region: no-drag;
+
+    button {
+      display: flex;
+      position: relative;
+      background: none;
+      border: none;
+      outline: none;
+      padding: 1px;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .fullscreenExit {
+      display: none;
+    }
   }
 
   &.controlBtnLeft {
@@ -230,19 +261,10 @@ export default {
       }
 
       button {
-        position: relative;
         width: @control-btn-width;
         height: @control-btn-width;
-        background: none;
-        border: none;
-        outline: none;
-        padding: 1px;
-        cursor: pointer;
         border-radius: 50%;
         color: @color-theme_2;
-        display: flex;
-        justify-content: center;
-        align-items: center;
         + button {
           margin-right: (@control-btn-width / 2);
         }
@@ -250,7 +272,7 @@ export default {
         &.hide {
           background-color: @color-hideBtn;
         }
-        &.min {
+        &.min, &.fullscreenExit {
           background-color: @color-minBtn;
         }
         &.max {
@@ -272,24 +294,14 @@ export default {
     .controBtn {
       right: 0;
       button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
         width: 46px;
         height: 30px;
-        background: none;
-        border: none;
-        outline: none;
-        padding: 1px;
-        cursor: pointer;
         color: @color-theme;
         transition: background-color 0.2s ease-in-out;
 
         &:hover {
-          &.hide, &.min, &.max {
-            background-color: @color-btn-hover;
-          }
+          background-color: @color-btn-hover;
+
           &.close {
             background-color: @color-closeBtn;
           }
@@ -407,7 +419,7 @@ each(@themes, {
             &.hide {
               background-color: ~'@{color-@{value}-hideBtn}';
             }
-            &.min {
+            &.min, &.fullscreenExit {
               background-color: ~'@{color-@{value}-minBtn}';
             }
             &.max {
@@ -424,9 +436,8 @@ each(@themes, {
           button {
             color: ~'@{color-@{value}-theme_2-font-label}';
             &:hover {
-              &.hide, &.min, &.max {
-                background-color: ~'@{color-@{value}-btn-hover}';
-              }
+              background-color: ~'@{color-@{value}-btn-hover}';
+
               &.close {
                 background-color: ~'@{color-@{value}-closeBtn}';
               }
diff --git a/src/renderer/core/useApp/useEventListener.js b/src/renderer/core/useApp/useEventListener.js
index f8fa6383..3f661d85 100644
--- a/src/renderer/core/useApp/useEventListener.js
+++ b/src/renderer/core/useApp/useEventListener.js
@@ -28,8 +28,11 @@ const handle_open_devtools = event => {
   rendererSend(NAMES.mainWindow.open_dev_tools)
 }
 const handle_fullscreen = event => {
-  if (event.event.repeat) return
-  rendererInvoke(NAMES.mainWindow.fullscreen, !isFullscreen.value).then(fullscreen => {
+  let fullscreen = !isFullscreen.value
+  if (typeof event == 'boolean') {
+    fullscreen = event
+  } else if (event.event.repeat) return
+  rendererInvoke(NAMES.mainWindow.fullscreen, fullscreen).then(fullscreen => {
     isFullscreen.value = fullscreen
   })
 }
@@ -75,6 +78,7 @@ export default ({
   window.eventHub.on('key_escape_down', handle_key_esc_down)
   window.eventHub.on('key_mod+f12_down', handle_open_devtools)
   window.eventHub.on('key_f11_down', handle_fullscreen)
+  window.eventHub.on(eventBaseName.fullscreenToggle, handle_fullscreen)
   document.body.addEventListener('click', handleBodyClick, true)
 
   if (isProd && !window.dt && !isLinux) {
@@ -89,6 +93,7 @@ export default ({
     window.eventHub.off('key_escape_down', handle_key_esc_down)
     window.eventHub.off('key_mod+f12_down', handle_open_devtools)
     window.eventHub.off('key_f11_down', handle_fullscreen)
+    window.eventHub.off(eventBaseName.fullscreenToggle, handle_fullscreen)
     document.body.removeEventListener('click', handleBodyClick)
     window.eventHub.emit(eventBaseName.unbindKey)
     rSetConfig()
diff --git a/src/renderer/event/names.js b/src/renderer/event/names.js
index 5867f105..7a705631 100644
--- a/src/renderer/event/names.js
+++ b/src/renderer/event/names.js
@@ -10,6 +10,7 @@ const names = {
     min: 'min',
     max: 'max',
     close: 'close',
+    fullscreenToggle: 'fullscreenToggle',
     set_config: 'set_config',
     set_hot_key_config: 'set_hot_key_config',
   },