From 9752fab8a53607d4bae4294e744dd39b85f02fe1 Mon Sep 17 00:00:00 2001 From: james58899 Date: Tue, 10 Dec 2024 04:04:49 +0000 Subject: [PATCH 1/5] Rewrite click --- src/components/centerBlock/OverlayPlayer.vue | 89 +++++++------------- 1 file changed, 30 insertions(+), 59 deletions(-) diff --git a/src/components/centerBlock/OverlayPlayer.vue b/src/components/centerBlock/OverlayPlayer.vue index d7076ad..51c54dd 100644 --- a/src/components/centerBlock/OverlayPlayer.vue +++ b/src/components/centerBlock/OverlayPlayer.vue @@ -327,8 +327,6 @@ const withHandlePointerEvent = (event, callback) => { } // Handle player click -const isFirstClickUIHidden = ref(false) - const doubleClickCount = ref(0) const doubleClickTimer = ref(null) @@ -348,7 +346,6 @@ const handlePlayerClick = (event) => { // Prevent click on icon button if (event.target instanceof HTMLSpanElement) return - const isHidden = isPlayerHidden() const isTouchEvent = isTouch(event) // Set touch mode @@ -356,72 +353,46 @@ const handlePlayerClick = (event) => { doubleClickCount.value++ if (doubleClickCount.value === 1) { - // Trigger first click - handlePlayerFirstClick(event, isHidden, isTouchEvent) - } else if (doubleClickCount.value === 2) { - // Reset timer and count - resetDoubleClick() - // Trigger second click - handlePlayerSecondClick(event, isTouchEvent) - } -} - -const handlePlayerFirstClick = (event, isHidden, isTouchEvent) => { - // Store first click UI hidden status - isFirstClickUIHidden.value = isHidden - - if (!isTouchEvent) { - // Toggle play when dropdown is not visible - if (!isDropdownVisible()) { + // First click + if (isTouchEvent) { + if (isPlayerHidden()) { + showUIAndResetAutoHideTimer(isTouchEvent) + } else { + hideUI() + } + } else { showUIAndResetAutoHideTimer(isTouchEvent) togglePlay(true) } - } else if (isHidden) { - showUIAndResetAutoHideTimer(isTouchEvent) - } - // Delay 300 to detect double click and hide UI on touch - doubleClickTimer.value = setTimeout(() => { + // Double click timer + clearTimeout(doubleClickTimer.value) + doubleClickTimer.value = setTimeout(() => { + resetDoubleClick() + }, 300) + } else if (doubleClickCount.value === 2) { + // Second click resetDoubleClick() - if (isTouchEvent && !isHidden) { - hideUI() - } - }, 300) -} - -const handlePlayerSecondClick = (event, isTouchEvent) => { - // Skip if video is not ready or dropdown is visible - if (!videoRef.value || isDropdownVisible()) { - return - } - - if (isTouchEvent && !isFirstClickUIHidden.value) { - // Trigger show UI to reset auto hide timer - showUIAndResetAutoHideTimer(isTouchEvent) - - // Get click position - const elementOffsetX = event.target.getBoundingClientRect().x - const eventX = event.clientX - elementOffsetX - - // Click center will toggle play, left and right sides will seek time - const leftSideEnd = videoRef.value.clientWidth / 3 - const RightSideStart = leftSideEnd * 2 - if (eventX < leftSideEnd) { - seekBackward() - } else if (eventX > RightSideStart) { - seekForward() - } else { - togglePlay() - } - } else { - toggleFullscreen() if (isTouchEvent) { - hideUI() + // Get click position + const eventX = event.clientX - event.target.getBoundingClientRect().x + + // Click center will toggle play, left and right sides will seek time + const leftSideEnd = videoRef.value.clientWidth / 3 + const RightSideStart = leftSideEnd * 2 + if (eventX < leftSideEnd) { + seekBackward() + } else if (eventX > RightSideStart) { + seekForward() + } else { + togglePlay() + } } else { - showUIAndResetAutoHideTimer(isTouchEvent) + toggleFullscreen() togglePlay(true) } + hideUI() } } From ab434f4ab91e9363695015c84eb85316e82ea100 Mon Sep 17 00:00:00 2001 From: james58899 Date: Tue, 10 Dec 2024 04:58:46 +0000 Subject: [PATCH 2/5] Fix mobile chrome --- src/components/centerBlock/OverlayPlayer.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/centerBlock/OverlayPlayer.vue b/src/components/centerBlock/OverlayPlayer.vue index 51c54dd..2650765 100644 --- a/src/components/centerBlock/OverlayPlayer.vue +++ b/src/components/centerBlock/OverlayPlayer.vue @@ -300,6 +300,7 @@ const handlePlayerPointerEvent = (event) => { // Set touch mode touchMode.value = isTouchEvent + if (isTouchEvent && event.type === 'pointermove') return // Skip trigger move event on touch mode showUIAndResetAutoHideTimer(isTouchEvent) } From f6fc7c05d25fc713212937df29e21fc06ccdf4a2 Mon Sep 17 00:00:00 2001 From: james58899 Date: Tue, 10 Dec 2024 05:12:14 +0000 Subject: [PATCH 3/5] Try rotate to landscape on full screen --- src/components/centerBlock/OverlayPlayer.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/centerBlock/OverlayPlayer.vue b/src/components/centerBlock/OverlayPlayer.vue index 2650765..5544517 100644 --- a/src/components/centerBlock/OverlayPlayer.vue +++ b/src/components/centerBlock/OverlayPlayer.vue @@ -156,11 +156,14 @@ const togglePlay = (showAction = false) => { const toggleFullscreen = () => { if (!props.resource) return if (!document.fullscreenElement) { - overlayVideoRef.value?.requestFullscreen().catch((err) => { + overlayVideoRef.value?.requestFullscreen().then(() => { + screen.orientation.lock('landscape').catch(() => {}) + }).catch((err) => { console.error(`Error attempting to enable fullscreen mode: ${err.message} (${err.name})`) }) } else { document.exitFullscreen() + screen.orientation.unlock().catch(() => {}) } } From 31c05a23a2ed7b38f68e7a9aea285433de5ff5b7 Mon Sep 17 00:00:00 2001 From: james58899 Date: Tue, 10 Dec 2024 05:43:58 +0000 Subject: [PATCH 4/5] Change click center toggle play --- src/components/centerBlock/OverlayPlayer.vue | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/components/centerBlock/OverlayPlayer.vue b/src/components/centerBlock/OverlayPlayer.vue index 5544517..3fb7f6c 100644 --- a/src/components/centerBlock/OverlayPlayer.vue +++ b/src/components/centerBlock/OverlayPlayer.vue @@ -359,10 +359,22 @@ const handlePlayerClick = (event) => { if (doubleClickCount.value === 1) { // First click if (isTouchEvent) { - if (isPlayerHidden()) { + // Get click position + const eventX = event.clientX - event.target.getBoundingClientRect().x + // Calculate left and right side + const leftSideEnd = videoRef.value.clientWidth / 3 + const RightSideStart = leftSideEnd * 2 + + if (eventX > leftSideEnd && eventX < RightSideStart) { + // Center showUIAndResetAutoHideTimer(isTouchEvent) + togglePlay() } else { - hideUI() + if (isPlayerHidden()) { + showUIAndResetAutoHideTimer(isTouchEvent) + } else { + hideUI() + } } } else { showUIAndResetAutoHideTimer(isTouchEvent) @@ -382,7 +394,7 @@ const handlePlayerClick = (event) => { // Get click position const eventX = event.clientX - event.target.getBoundingClientRect().x - // Click center will toggle play, left and right sides will seek time + // Click center will toggle fullscreen, left and right sides will seek time const leftSideEnd = videoRef.value.clientWidth / 3 const RightSideStart = leftSideEnd * 2 if (eventX < leftSideEnd) { @@ -390,6 +402,7 @@ const handlePlayerClick = (event) => { } else if (eventX > RightSideStart) { seekForward() } else { + toggleFullscreen() togglePlay() } } else { From 37c4c07c3999c61fee77047ef757a435f408c938 Mon Sep 17 00:00:00 2001 From: james58899 Date: Tue, 10 Dec 2024 05:44:51 +0000 Subject: [PATCH 5/5] Remove play button padding --- src/components/centerBlock/OverlayPlayer.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/centerBlock/OverlayPlayer.vue b/src/components/centerBlock/OverlayPlayer.vue index 3fb7f6c..33aa03a 100644 --- a/src/components/centerBlock/OverlayPlayer.vue +++ b/src/components/centerBlock/OverlayPlayer.vue @@ -523,7 +523,7 @@ onUnmounted(() => {