在全屏状态下鼠标在空白处静止不动3秒后自动将其隐藏

publish/changeLog.md

@@ -8,6 +8,7 @@
 
 - 优化播放详情页背景显示，现在有背景图片的主题可以在播放详情页显示它的图片了
 - 在全屏状态下的播放详情页仍会显示退出播放详情页按钮，同时在其旁边添加退出全屏按钮
+- 在全屏状态下鼠标在空白处静止不动3秒后自动将其隐藏
 
 ### 修复
 

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)
+}

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)
       },