refactor: implement consistent back-to-top function

src/components/Topbar/TopbarFavoritesPop.vue

@@ -2,7 +2,7 @@
 import type { Ref } from 'vue'
 import { onMounted, reactive, ref, watch } from 'vue'
 import type { FavoriteCategory, FavoriteResource } from './types'
-import { getUserID, removeHttpFromUrl } from '~/utils/main'
+import { getUserID, removeHttpFromUrl, smoothScrollToTop } from '~/utils/main'
 import { calcCurrentTime } from '~/utils/dataFormatter'
 
 const favoriteCategories = reactive<Array<FavoriteCategory>>([])
@@ -30,7 +30,7 @@ watch(activatedMediaId, (newVal: number, oldVal: number) => {
 
   favoriteResources.length = 0
   if (favoriteVideosWrap.value)
-    scrollToTop(favoriteVideosWrap.value, 300)
+    smoothScrollToTop(favoriteVideosWrap.value, 300)
 
   getFavoriteResources(newVal, 1)
 })
@@ -121,32 +121,6 @@ function changeCategory(categoryItem: FavoriteCategory) {
   activatedMediaId.value = categoryItem.id
   activatedFavoriteTitle.value = categoryItem.title
 }
-
-/**
- * smooth scroll to the top of the html element
- */
-function scrollToTop(element: HTMLElement, duration: number) {
-  // cancel if already on top
-  if (element.scrollTop === 0)
-    return
-
-  const cosParameter = element.scrollTop / 2
-  let scrollCount = 0
-  let oldTimestamp = 0
-
-  function step(newTimestamp: number) {
-    if (oldTimestamp !== 0) {
-      // 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)
-    }
-    oldTimestamp = newTimestamp
-    window.requestAnimationFrame(step)
-  }
-  window.requestAnimationFrame(step)
-}
 </script>
 
 <template>
@@ -170,7 +144,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
       un-border="!rounded-t-$bew-radius"
       backdrop-glass
     >
-      <h3 cursor="pointer" font-600 @click="scrollToTop(favoriteVideosWrap, 300)">
+      <h3 cursor="pointer" font-600 @click="smoothScrollToTop(favoriteVideosWrap, 300)">
         {{ activatedFavoriteTitle }}
       </h3>
 

src/components/Topbar/TopbarHistoryPop.vue

@@ -5,7 +5,7 @@ import { onMounted, reactive, ref, watch } from 'vue'
 import { useDateFormat } from '@vueuse/core'
 import type { HistoryItem } from './types'
 import { HistoryType } from './types'
-import { removeHttpFromUrl } from '~/utils/main'
+import { removeHttpFromUrl, smoothScrollToTop } from '~/utils/main'
 import { calcCurrentTime } from '~/utils/dataFormatter'
 
 const { t } = useI18n()
@@ -44,7 +44,7 @@ watch(activatedTab, (newVal: number, oldVal: number) => {
 
   historys.length = 0
   if (historysWrap.value)
-    scrollToTop(historysWrap.value, 300)
+    smoothScrollToTop(historysWrap.value, 300)
 
   if (newVal === 0) {
     getHistoryList(HistoryType.Archive)
@@ -153,32 +153,6 @@ function getHistoryList(type: HistoryType, viewAt = 0 as number) {
       isLoading.value = false
     })
 }
-
-/**
- * smooth scroll to the top of the html element
- */
-function scrollToTop(element: HTMLElement, duration: number) {
-  // cancel if already on top
-  if (element.scrollTop === 0)
-    return
-
-  const cosParameter = element.scrollTop / 2
-  let scrollCount = 0
-  let oldTimestamp = 0
-
-  function step(newTimestamp: number) {
-    if (oldTimestamp !== 0) {
-      // 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)
-    }
-    oldTimestamp = newTimestamp
-    window.requestAnimationFrame(step)
-  }
-  window.requestAnimationFrame(step)
-}
 </script>
 
 <template>

src/components/Topbar/TopbarMomentsPop.vue

@@ -5,7 +5,7 @@ import { onMounted, reactive, ref, watch } from 'vue'
 import { isNewArticle, isNewVideo, setLastestOffsetID } from './notify'
 import { MomentType } from './types'
 import type { MomentItem } from './types'
-import { getUserID } from '~/utils/main'
+import { getUserID, smoothScrollToTop } from '~/utils/main'
 import { calcTimeSince } from '~/utils/dataFormatter'
 
 const { t } = useI18n()
@@ -42,7 +42,7 @@ watch(selectedTab, (newVal: number, oldVal: number) => {
     return
 
   if (momentsWrap.value)
-    scrollToTop(momentsWrap.value, 300)
+    smoothScrollToTop(momentsWrap.value, 300)
   moments.length = 0
   if (newVal === 0) {
     getNewMoments([MomentType.Video, MomentType.Bangumi])
@@ -240,32 +240,6 @@ function pushItemIntoMoments(item: any) {
     } as MomentItem)
   }
 }
-
-/**
- * smooth scroll to the top of the html element
- */
-function scrollToTop(element: HTMLElement, duration: number) {
-  // cancel if already on top
-  if (element.scrollTop === 0)
-    return
-
-  const cosParameter = element.scrollTop / 2
-  let scrollCount = 0
-  let oldTimestamp = 0
-
-  function step(newTimestamp: number) {
-    if (oldTimestamp !== 0) {
-      // 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)
-    }
-    oldTimestamp = newTimestamp
-    window.requestAnimationFrame(step)
-  }
-  window.requestAnimationFrame(step)
-}
 </script>
 
 <template>

src/contentScripts/views/Home/components/RecommendContent.vue

@@ -9,7 +9,7 @@ const appVideoList = reactive<AppVideoModel[]>([])
 const isLoading = ref<boolean>(false)
 const needToLoginFirst = ref<boolean>(false)
 const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
-let refreshIdx = 1
+const refreshIdx = ref<number>(1)
 
 watch(() => settings.value.recommendationMode, (newValue, oldValue) => {
   videoList.length = 0
@@ -60,7 +60,7 @@ async function getRecommendVideos() {
   try {
     const response = await browser.runtime.sendMessage({
       contentScriptQuery: 'getRecommendVideos',
-      refreshIdx: refreshIdx++,
+      refreshIdx: refreshIdx.value++,
     })
 
     if (response.code === 0) {
@@ -128,82 +128,84 @@ function jumpToLoginPage() {
 </script>
 
 <template>
-  <Empty v-if="needToLoginFirst" mt-6 :description="$t('common.please_log_in_first')">
-    <Button type="primary" @click="jumpToLoginPage()">
-      {{ $t('common.login') }}
-    </Button>
-  </Empty>
-  <div
-    v-else
-    ref="containerRef"
-    m="b-0 t-0"
-    grid="~ 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-4"
-  >
-    <template v-if="settings.recommendationMode === 'web'">
-      <VideoCard
-        v-for="video in videoList"
-        :id="video.id"
-        :key="video.id"
-        :duration="video.duration"
-        :title="video.title"
-        :cover="video.pic"
-        :author="video.owner.name"
-        :author-face="video.owner.face"
-        :mid="video.owner.mid"
-        :view="video.stat.view"
-        :danmaku="video.stat.danmaku"
-        :published-timestamp="video.pubdate"
-        :bvid="video.bvid"
-      />
-    </template>
-    <template v-else>
-      <VideoCard
-        v-for="(video, index) in appVideoList"
-        :id="Number(video.param)"
-        :key="index"
-        :duration="video.duration"
-        :title="video.title"
-        :cover="video.cover"
-        :author="video.name"
-        :author-face="video.face"
-        :mid="video.mid"
-        :view="video.play"
-        :danmaku="video.danmaku"
-        :published-timestamp="video.ctime"
-        :aid="Number(video.param)"
-      />
-    </template>
+  <div>
+    <Empty v-if="needToLoginFirst" mt-6 :description="$t('common.please_log_in_first')">
+      <Button type="primary" @click="jumpToLoginPage()">
+        {{ $t('common.login') }}
+      </Button>
+    </Empty>
+    <div
+      v-else
+      ref="containerRef"
+      m="b-0 t-0" relative w-full h-full
+      grid="~ 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-4"
+    >
+      <template v-if="settings.recommendationMode === 'web'">
+        <VideoCard
+          v-for="video in videoList"
+          :id="video.id"
+          :key="video.id"
+          :duration="video.duration"
+          :title="video.title"
+          :cover="video.pic"
+          :author="video.owner.name"
+          :author-face="video.owner.face"
+          :mid="video.owner.mid"
+          :view="video.stat.view"
+          :danmaku="video.stat.danmaku"
+          :published-timestamp="video.pubdate"
+          :bvid="video.bvid"
+        />
+      </template>
+      <template v-else>
+        <VideoCard
+          v-for="(video, index) in appVideoList"
+          :id="Number(video.param)"
+          :key="Number(video.param)"
+          :duration="video.duration"
+          :title="video.title"
+          :cover="video.cover"
+          :author="video.name"
+          :author-face="video.face"
+          :mid="video.mid"
+          :view="video.play"
+          :danmaku="video.danmaku"
+          :published-timestamp="video.ctime"
+          :aid="Number(video.param)"
+        />
+      </template>
 
-    <!-- skeleton -->
-    <template v-for="item in 30" :key="item">
-      <div
-        v-if="isLoading"
-        mb-8 pointer-events-none select-none
-      >
-        <div aspect-video bg="$bew-fill-4" rounded="$bew-radius" />
-        <div flex mt-4>
-          <div m="r-4" w="40px" h="40px" rounded="1/2" bg="$bew-fill-4" shrink-0 />
-          <div w-full>
-            <div grid gap-2>
-              <div w-full h-5 bg="$bew-fill-3" />
-              <div w="3/4" h-5 bg="$bew-fill-3" />
-            </div>
-            <div grid gap-2 mt-4>
-              <div w="50%" h-4 bg="$bew-fill-2" />
-              <div w="80%" h-4 bg="$bew-fill-2" />
-            </div>
-            <div text="transparent sm" inline-block mt-4 p="x-2 y-1" bg="$bew-fill-1" rounded-4>
-              hello world
+      <!-- skeleton -->
+      <template v-for="item in 30" :key="item">
+        <div
+          v-if="isLoading"
+          mb-8 pointer-events-none select-none
+        >
+          <div aspect-video bg="$bew-fill-4" rounded="$bew-radius" />
+          <div flex mt-4>
+            <div m="r-4" w="40px" h="40px" rounded="1/2" bg="$bew-fill-4" shrink-0 />
+            <div w-full>
+              <div grid gap-2>
+                <div w-full h-5 bg="$bew-fill-3" />
+                <div w="3/4" h-5 bg="$bew-fill-3" />
+              </div>
+              <div grid gap-2 mt-4>
+                <div w="50%" h-4 bg="$bew-fill-2" />
+                <div w="80%" h-4 bg="$bew-fill-2" />
+              </div>
+              <div text="transparent sm" inline-block mt-4 p="x-2 y-1" bg="$bew-fill-1" rounded-4>
+                hello world
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </template>
-  </div>
+      </template>
+    </div>
 
-  <Transition name="fade">
-    <Loading v-if="isLoading" />
-  </Transition>
+    <Transition name="fade">
+      <Loading v-if="isLoading" />
+    </Transition>
+  </div>
 </template>
 
 <style lang="scss" scoped>