From d59d78e3d5e5d9d4fd204e6c4357a0692f16e9d3 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 17 Oct 2023 11:05:30 +0800
Subject: [PATCH] feat: auto-scroll to content below when search page mode is
 activated

---
 src/contentScripts/views/App.vue                     |  4 ++--
 src/contentScripts/views/Home/Home.vue               |  5 +++--
 src/contentScripts/views/Home/components/ForYou.vue  |  2 +-
 src/contentScripts/views/Home/components/Ranking.vue |  5 +++--
 src/utils/main.ts                                    | 10 +++++-----
 5 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index bf6f059e..a8e8b9cb 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -222,10 +222,10 @@ function handleRefresh() {
     dynamicComponentKey.value = `dynamicComponent${Number(new Date())}`
 }
 
-function handleBackToTop() {
+function handleBackToTop(targetScrollTop = 0 as number) {
   const osInstance = scrollbarRef.value?.osInstance()
 
-  smoothScrollToTop(osInstance.elements().viewport, 300)
+  smoothScrollToTop(osInstance.elements().viewport, 300, targetScrollTop)
 }
 
 function handleAdaptToOtherPageStylesChange() {
diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index 72215d88..bfe9cbaf 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -8,7 +8,7 @@ import { HomeSubPage } from './types'
 import emitter from '~/utils/mitt'
 import { settings } from '~/logic'
 
-const handleBackToTop = inject('handleBackToTop') as () => void
+const handleBackToTop = inject('handleBackToTop') as (targetScrollTop: number) => void
 
 const recommendContentKey = ref<string>(`recommendContent${Number(new Date())}`)
 const activatedPage = ref<HomeSubPage>(HomeSubPage.ForYou)
@@ -34,7 +34,7 @@ const tabs = reactive<HomeTab[]>([
 ])
 
 watch(() => activatedPage.value, () => {
-  handleBackToTop()
+  handleBackToTop(settings.value.useSearchPageModeOnHomePage ? 510 : 0)
 })
 
 onMounted(() => {
@@ -57,6 +57,7 @@ onUnmounted(() => {
     >
       <div
         pos="absolute left-0 top-0" w-full h-580px mb--580px bg="cover center" z-1
+        pointer-events-none
         :style="{
           backgroundImage: `url(${settings.searchPageWallpaper})`,
           backgroundAttachment: settings.searchPageModeWallpaperFixed ? 'fixed' : 'unset'
diff --git a/src/contentScripts/views/Home/components/ForYou.vue b/src/contentScripts/views/Home/components/ForYou.vue
index 5e333043..807126ae 100644
--- a/src/contentScripts/views/Home/components/ForYou.vue
+++ b/src/contentScripts/views/Home/components/ForYou.vue
@@ -7,7 +7,7 @@ import { LanguageType } from '~/enums/appEnums'
 
 const videoList = reactive<ForYouVideoModel[]>([])
 const appVideoList = reactive<AppForYouVideoModel[]>([])
-const isLoading = ref<boolean>(false)
+const isLoading = ref<boolean>(true)
 const needToLoginFirst = ref<boolean>(false)
 const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
 const refreshIdx = ref<number>(1)
diff --git a/src/contentScripts/views/Home/components/Ranking.vue b/src/contentScripts/views/Home/components/Ranking.vue
index 540c51c2..535c8646 100644
--- a/src/contentScripts/views/Home/components/Ranking.vue
+++ b/src/contentScripts/views/Home/components/Ranking.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import type { RankingType, RankingVideoModel } from '../types'
+import { settings } from '~/logic'
 
 const { t } = useI18n()
 
-const handleBackToTop = inject('handleBackToTop') as () => void
+const handleBackToTop = inject('handleBackToTop') as (targetScrollTop: number) => void
 
 const rankingTypes = computed((): RankingType[] => {
   return [
@@ -41,7 +42,7 @@ const activatedRankingType = reactive<RankingType>({ ...rankingTypes.value[0] })
 const videoList = reactive<RankingVideoModel[]>([])
 
 watch(() => activatedRankingType.name, () => {
-  handleBackToTop()
+  handleBackToTop(settings.value.useSearchPageModeOnHomePage ? 510 : 0)
   getRankingVideos()
 })
 
diff --git a/src/utils/main.ts b/src/utils/main.ts
index 57f47500..9ff671d7 100644
--- a/src/utils/main.ts
+++ b/src/utils/main.ts
@@ -67,12 +67,12 @@ export function hexToRGBA(hex: string, alpha: number): string {
 /**
  * smooth scroll to the top of the html element
  */
-export function smoothScrollToTop(element: HTMLElement, duration: number) {
+export function smoothScrollToTop(element: HTMLElement, duration: number, targetScrollTop = 0 as number) {
   // cancel if already on top
-  if (element.scrollTop === 0)
+  if (element.scrollTop === targetScrollTop)
     return
 
-  const cosParameter = element.scrollTop / 2
+  const cosParameter = (element.scrollTop - targetScrollTop) / 2
   let scrollCount = 0
   let oldTimestamp = 0
 
@@ -81,8 +81,8 @@ export function smoothScrollToTop(element: HTMLElement, duration: number) {
       // if duration is 0 scrollCount will be Infinity
       scrollCount += (Math.PI * (newTimestamp - oldTimestamp)) / duration
       if (scrollCount >= Math.PI)
-        return (element.scrollTop = 0)
-      element.scrollTop = cosParameter + cosParameter * Math.cos(scrollCount)
+        return (element.scrollTop = targetScrollTop)
+      element.scrollTop = targetScrollTop + cosParameter + cosParameter * Math.cos(scrollCount)
     }
     oldTimestamp = newTimestamp
     window.requestAnimationFrame(step)