update: anime page

src/contentScripts/views/Anime/Anime.vue

@@ -1,31 +1,62 @@
 <script setup lang="ts">
-// import PopularAnimeCarousel from './components/PopularAnimeCarousel.vue'
 import type { Ref } from 'vue'
-import type { RecommendAnimeItem } from './types'
+import PopularAnimeCarousel from './components/PopularAnimeCarousel.vue'
+import type { AnimeItem } from './types'
+import { getUserID } from '~/utils'
 
-const recommendAnimeList = reactive<RecommendAnimeItem[]>([])
+const recommendAnimeList = reactive<AnimeItem[]>([])
+const animeWatchList = reactive<AnimeItem[]>([])
 const cursor = ref<number>()
-const animeWrap = ref<HTMLElement>() as Ref<HTMLElement>
 const isLoading = ref<boolean>()
 
 onMounted(() => {
   getRecommendAnimeList()
+  getAnimeWatchList()
 
-  if (animeWrap.value) {
-    animeWrap.value.addEventListener('scroll', () => {
-      // When you scroll to the bottom, they will automatically
-      // add the next page of data to the history list
-      if (
-        animeWrap.value.clientHeight + animeWrap.value.scrollTop
-          >= animeWrap.value.scrollHeight - 20
-        && recommendAnimeList.length > 0
-        && !isLoading.value
-      )
-        getRecommendAnimeList()
-    })
+  window.onscroll = () => {
+    if (
+      window.innerHeight + window.scrollY
+      >= document.body.scrollHeight - 20
+    ) {
+      if (isLoading.value)
+        return
+
+      getRecommendAnimeList()
+    }
   }
 })
 
+onUnmounted(() => {
+  // remove the global window.onscroll event
+  window.onscroll = () => {}
+})
+
+function getAnimeWatchList() {
+  isLoading.value = true
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'getAnimeWatchList',
+      vmid: getUserID() ?? 0,
+      pn: 1,
+      ps: 6,
+    })
+    .then((response) => {
+      const {
+        code,
+        data: { list },
+      } = response
+      if (code === 0) {
+        Object.assign(
+          animeWatchList,
+          list,
+        )
+      }
+    })
+    .finally(() => {
+      isLoading.value = false
+    })
+}
+
 function getRecommendAnimeList() {
   isLoading.value = true
   browser.runtime
@@ -42,51 +73,105 @@ function getRecommendAnimeList() {
         if (recommendAnimeList.length === 0) {
           Object.assign(
             recommendAnimeList,
-            items[0].sub_items as RecommendAnimeItem[],
+            items[0].sub_items as AnimeItem[],
           )
         }
-        else { recommendAnimeList.push(...items[0].sub_items) }
+        else {
+          recommendAnimeList.push(...items[0].sub_items)
+        }
         cursor.value = coursor
       }
-    }).finally(() => { isLoading.value = false })
+    })
+    .finally(() => {
+      isLoading.value = false
+    })
 }
 </script>
 
 <template>
-  <div ref="animeWrap">
-    <!-- <PopularAnimeCarousel /> -->
-    <section>
-      <h3 text="3xl $bew-text-1" font="bold" my-4>
-        Recommended for you
-      </h3>
-      <div grid="~ xl:cols-6 lg:cols-4 md:cols-3 cols-2 gap-6">
-        <a
-          v-for="item in recommendAnimeList"
-          :key="item.episode_id"
-          :href="item.link"
-          target="_blank"
-        >
-          <div
-            rounded="$bew-radius"
-            aspect="12/16"
-            overflow-hidden
-            mb-4
-            bg="$bew-fill-3"
-          >
-            <img
-              :src="`${item.cover.replace('https:', '')}@466w_622h.webp`"
-              :alt="item.title"
+  <div>
+    <div>
+      <!-- <section mb-16>
+        <PopularAnimeCarousel />
+      </section> -->
+      <!-- Your Watchlist -->
+      <section mb-16>
+        <h3 text="3xl $bew-text-1" font="bold" mb-6>
+          Your Watchlist
+        </h3>
+        <div grid="~ xl:cols-6 lg:cols-4 md:cols-3 cols-2 gap-6">
+          <div v-for="item in animeWatchList" :key="item.episode_id">
+            <a
               rounded="$bew-radius"
+              aspect="12/16"
+              overflow-hidden
+              mb-4
+              bg="$bew-fill-3"
+              :href="item.url"
+              target="_blank"
             >
+              <img
+                :src="`${item.cover.replace('https:', '')}@466w_622h.webp`"
+                :alt="item.title"
+                rounded="$bew-radius"
+              >
+            </a>
+            <p un-text="lg" my-4>
+              <a :href="item.link" target="_blank">
+                {{ item.title }}
+              </a>
+            </p>
+            <p text="$bew-text-2" mb-10>
+              {{ item.progress !== "" ? item.progress : `Haven't seen` }}
+            </p>
           </div>
-          <p text="lg" my-2>{{ item.title }}</p>
-          <p text="$bew-text-2" mb-8>{{ item.sub_title }}</p>
-        </a>
-      </div>
-    </section>
+        </div>
+      </section>
+
+      <!-- Recommended for you -->
+      <section>
+        <h3 text="3xl $bew-text-1" font="bold" mb-6>
+          Recommended for you
+        </h3>
+        <div grid="~ xl:cols-6 lg:cols-4 md:cols-3 cols-2 gap-6">
+          <div v-for="item in recommendAnimeList" :key="item.episode_id">
+            <a
+              rounded="$bew-radius"
+              aspect="12/16"
+              overflow-hidden
+              mb-4
+              bg="$bew-fill-3"
+              :href="item.link"
+              target="_blank"
+            >
+              <img
+                :src="`${item.cover.replace('https:', '')}@466w_622h.webp`"
+                :alt="item.title"
+                rounded="$bew-radius"
+              >
+            </a>
+            <p un-text="lg" my-4>
+              <a :href="item.link" target="_blank">
+                {{ item.title }}
+              </a>
+            </p>
+            <p text="$bew-text-2" mb-10>
+              <span
+                text="$bew-theme-color"
+                bg="$bew-theme-color-20"
+                p="x-3 y-1"
+                mr-2
+                rounded-4
+              >{{ item.rating ?? '-.-' }}</span>
+              {{ item.sub_title }}
+            </p>
+          </div>
+        </div>
+      </section>
+    </div>
+    <!-- loading -->
+    <loading v-if="isLoading && recommendAnimeList.length !== 0" m="-t-4" />
   </div>
-  <!-- loading -->
-  <loading v-if="isLoading && recommendAnimeList.length !== 0" m="-t-4" />
 </template>
 
 <style lang="scss" scoped></style>

src/contentScripts/views/Anime/components/PopularAnimeCarousel.vue

@@ -45,7 +45,7 @@ function getPopularAnimeList() {
     z="-1"
   >
     <div
-      :style="{ backgroundImage: url(${activatedAnime?.cover}) }"
+      :style="{ backgroundImage: `url(${activatedAnime?.cover})` }"
       bg="cover center"
       duration-600
       w-full

src/contentScripts/views/Anime/types.ts

@@ -26,7 +26,7 @@ export interface PopularAnime {
   url: string
 }
 
-export interface RecommendAnimeItem {
+export interface AnimeItem {
   cover: string
   episode_id: number
   evaluate: string
@@ -35,6 +35,7 @@ export interface RecommendAnimeItem {
     text: string[]
   }
   link: string
+  url: string
   rank_id: number
   rating: string
   rating_count: number
@@ -47,9 +48,11 @@ export interface RecommendAnimeItem {
     view: number
   }
   sub_title: string
+  subtitle: string
   text: string[]
   title: string
   user_status: {
     follow: number
   }
+  progress: string
 }