From 15c4810117e9216464f33fbdeee49778bd2f05f3 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 20 Aug 2023 18:48:06 +0800
Subject: [PATCH] feat: add page refresh & back to top features

---
 src/contentScripts/views/App.vue | 39 ++++++++++++++++++++++++++---
 src/utils/main.ts                | 42 ++++++++++++++++++++++++++------
 2 files changed, 70 insertions(+), 11 deletions(-)

diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 6f37d41e..8347a14a 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -14,7 +14,7 @@ import Video from './Video/Video.vue'
 import { accessKey, activatedPage, settings } from '~/logic'
 import '~/styles/index.ts'
 import { AppPage, LanguageType } from '~/enums/appEnums'
-import { getUserID, hexToRGBA } from '~/utils/main'
+import { getUserID, hexToRGBA, smoothScrollToTop } from '~/utils/main'
 import emitter from '~/utils/mitt'
 
 const { locale } = useI18n()
@@ -37,6 +37,7 @@ const isVideoPage = ref<boolean>(false)
 const mainAppRef = ref<HTMLElement>() as Ref<HTMLElement>
 const mainAppOpacity = ref<number>(0)
 const showTopbarMask = ref<boolean>(false)
+const dynamicCompoentKey = ref<number>(Number(new Date()))
 
 const tooltipPlacement = computed(() => {
   if (settings.value.dockPosition === 'left')
@@ -211,6 +212,14 @@ function setAppWallpaperMaskingOpacity() {
   else
     bewlyElement.style.setProperty('--bew-bg-mask-opacity', `${settings.value.wallpaperMaskOpacity}%`)
 }
+
+function handleRefresh() {
+  dynamicCompoentKey.value = Number(new Date())
+}
+
+function handleBackToTop() {
+  smoothScrollToTop(mainAppRef.value, 300)
+}
 </script>
 
 <template>
@@ -347,13 +356,37 @@ function setAppWallpaperMaskingOpacity() {
         </aside>
 
         <main
-          ref="main"
           p="t-80px" m-auto
           relative
           :w="isVideoPage ? '[calc(100%-160px)]' : 'lg:85% md:[calc(90%-60px)] [calc(100%-140px)]'"
         >
+          <!-- control button group -->
+          <div
+            v-if="activatedPage !== AppPage.Search"
+            pos="fixed right-24 bottom-4" z-4
+          >
+            <!-- refresh button -->
+            <Button
+              v-if="!showTopbarMask"
+              size="small"
+              frosted-glass shadow="$bew-shadow-1" w-45px h-45px
+              @click="handleRefresh"
+            >
+              <tabler:refresh text-lg shrink-0 />
+            </Button>
+            <!-- back to top button -->
+            <Button
+              v-else
+              size="small"
+              frosted-glass shadow="$bew-shadow-1" w-45px h-45px mt-2
+              @click="handleBackToTop"
+            >
+              <tabler:arrow-big-up text-lg shrink-0 />
+            </Button>
+          </div>
+
           <Transition name="fade">
-            <Component :is="pages[activatedPage]" absolute w-full />
+            <Component :is="pages[activatedPage]" :key="dynamicCompoentKey" absolute w-full />
             <!-- <Video v-else /> -->
           </Transition>
         </main>
diff --git a/src/utils/main.ts b/src/utils/main.ts
index 08913938..5d5eec1d 100644
--- a/src/utils/main.ts
+++ b/src/utils/main.ts
@@ -3,7 +3,7 @@
  * @param name cookie name
  * @returns cookie value
  */
-export const getCookie = (name: string) => {
+export function getCookie(name: string) {
   const value = `; ${document.cookie}`
   const parts: Array<string> = value.split(`; ${name}=`)
   if (parts.length === 2)
@@ -15,7 +15,7 @@ export const getCookie = (name: string) => {
  * @param name cookie name
  * @param value cookie value
  */
-export const setCookie = (name: string, value: any, expDays: number) => {
+export function setCookie(name: string, value: any, expDays: number) {
   const date = new Date()
   date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
   const expires = `expires=${date.toUTCString()}`
@@ -38,11 +38,11 @@ export const getCSRF = () => getCookie('bili_jct')
  * @param url
  * @returns
  */
-export const removeHttpFromUrl = (url: string) => {
+export function removeHttpFromUrl(url: string) {
   return url.replace(/^https?:/, '')
 }
 
-export const openLinkToNewTab = (url: string) => {
+export function openLinkToNewTab(url: string) {
   window.open(url, '_blank')
 }
 
@@ -52,10 +52,10 @@ export const openLinkToNewTab = (url: string) => {
  * @param alpha color opacity
  * @returns
  */
-export const hexToRGBA = (hex: string, alpha: number) => {
-  const r = parseInt(hex.slice(1, 3), 16)
-  const g = parseInt(hex.slice(3, 5), 16)
-  const b = parseInt(hex.slice(5, 7), 16)
+export function hexToRGBA(hex: string, alpha: number) {
+  const r = Number.parseInt(hex.slice(1, 3), 16)
+  const g = Number.parseInt(hex.slice(3, 5), 16)
+  const b = Number.parseInt(hex.slice(5, 7), 16)
 
   if (alpha)
     return `rgba(${r}, ${g}, ${b}, ${alpha})`
@@ -63,3 +63,29 @@ export const hexToRGBA = (hex: string, alpha: number) => {
   else
     return `rgb(${r}, ${g}, ${b})`
 }
+
+/**
+ * smooth scroll to the top of the html element
+ */
+export function smoothScrollToTop(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)
+}