From 36bef673d3c7202dfb509851cf9bb9fac10cedbb Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Mon, 28 Mar 2022 18:05:58 +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=E9=BC=A0=E6=A0=87=E5=9C=A8=E7=A9=BA=E7=99=BD=E5=A4=84?=
 =?UTF-8?q?=E9=9D=99=E6=AD=A2=E4=B8=8D=E5=8A=A83=E7=A7=92=E5=90=8E?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E5=B0=86=E5=85=B6=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 publish/changeLog.md                          |  1 +
 .../core/PlayDetail/autoHideMounse.js         | 55 +++++++++++++++++++
 .../components/core/PlayDetail/index.vue      | 15 ++++-
 3 files changed, 69 insertions(+), 2 deletions(-)
 create mode 100644 src/renderer/components/core/PlayDetail/autoHideMounse.js

diff --git a/publish/changeLog.md b/publish/changeLog.md
index fd6659a3..9d02cc56 100644
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -8,6 +8,7 @@
 
 - 优化播放详情页背景显示，现在有背景图片的主题可以在播放详情页显示它的图片了
 - 在全屏状态下的播放详情页仍会显示退出播放详情页按钮，同时在其旁边添加退出全屏按钮
+- 在全屏状态下鼠标在空白处静止不动3秒后自动将其隐藏
 
 ### 修复
 
diff --git a/src/renderer/components/core/PlayDetail/autoHideMounse.js b/src/renderer/components/core/PlayDetail/autoHideMounse.js
new file mode 100644
index 00000000..e16462bc
--- /dev/null
+++ b/src/renderer/components/core/PlayDetail/autoHideMounse.js
@@ -0,0 +1,55 @@
+import { debounce } from '@renderer/utils/index'
+let isAutoHide = false
+let isLockedPointer = false
+let dom = null
+let event = null
+let isMouseDown = false
+
+const isControl = dom => {
+  if (!dom || dom === document.body) return false
+  // console.log(dom)
+  if (dom.getAttribute('aria-label') || dom.tagName == 'BUTTON') return true
+  return isControl(dom.parentNode)
+}
+const startTimeout = debounce(() => {
+  if (!isAutoHide || isMouseDown || !event) return
+  if (isControl(document.elementFromPoint(event.clientX, event.clientY))) return
+
+  dom.requestPointerLock()
+  isLockedPointer = true
+}, 3000)
+
+const handleMouseMove = (_event) => {
+  event = _event
+  startTimeout()
+  if (!isLockedPointer) return
+  document.exitPointerLock()
+  isLockedPointer = false
+}
+
+const handleMouseDown = () => {
+  isMouseDown = true
+}
+const handleMouseUp = () => {
+  isMouseDown = false
+  startTimeout()
+}
+
+export const registerAutoHideMounse = _dom => {
+  startTimeout()
+  if (isAutoHide || !_dom) return
+  isAutoHide = true
+  _dom.addEventListener('mousemove', handleMouseMove)
+  _dom.addEventListener('mousedown', handleMouseDown)
+  _dom.addEventListener('mouseup', handleMouseUp)
+  dom = _dom
+}
+
+export const unregisterAutoHideMounse = dom => {
+  if (!isAutoHide) return
+  isAutoHide = false
+  // console.log(dom)
+  dom?.removeEventListener('mousemove', handleMouseMove)
+  dom?.removeEventListener('mousedown', handleMouseDown)
+  dom?.removeEventListener('mouseup', handleMouseUp)
+}
diff --git a/src/renderer/components/core/PlayDetail/index.vue b/src/renderer/components/core/PlayDetail/index.vue
index 1449558d..8e8d0ed5 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" ref="dom_content")
     div(:class="$style.bg")
     //- div(:class="$style.bg" :style="bgStyle")
     //- div(:class="$style.bg2")
@@ -57,7 +57,7 @@ transition(enter-active-class="animated lightSpeedIn" leave-active-class="animat
 
 
 <script>
-import { useRefGetter, ref } from '@renderer/utils/vueTools'
+import { useRefGetter, ref, watch } from '@renderer/utils/vueTools'
 import { isFullscreen } from '@renderer/core/share'
 import { base as eventBaseName } from '@renderer/event/names'
 import {
@@ -72,6 +72,7 @@ import {
 import LyricPlayer from './LyricPlayer'
 import PlayBar from './PlayBar'
 import MusicComment from './components/MusicComment'
+import { registerAutoHideMounse, unregisterAutoHideMounse } from './autoHideMounse'
 
 export default {
   name: 'CorePlayDetail',
@@ -83,6 +84,7 @@ export default {
   setup() {
     const setting = useRefGetter('setting')
     const visibled = ref(false)
+    const dom_content = ref(null)
 
     let clickTime = 0
 
@@ -103,6 +105,8 @@ export default {
     }
 
     const handleAfterEnter = () => {
+      if (isFullscreen.value) registerAutoHideMounse(dom_content.value)
+
       visibled.value = true
     }
 
@@ -110,8 +114,14 @@ export default {
       setShowPlayLrcSelectContentLrc(false)
       hideComment(false)
       visibled.value = false
+
+      unregisterAutoHideMounse(dom_content.value)
     }
 
+    watch(isFullscreen, isFullscreen => {
+      (isFullscreen ? registerAutoHideMounse : unregisterAutoHideMounse)(dom_content.value)
+    })
+
     return {
       setting,
       isShowPlayerDetail,
@@ -125,6 +135,7 @@ export default {
       handleAfterLeave,
       visibled,
       isFullscreen,
+      dom_content,
       fullscreenExit() {
         window.eventHub.emit(eventBaseName.fullscreenToggle, false)
       },