From d49acf99eb0bb5e9debe26affcfeac457ee743d0 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Mon, 30 Jan 2023 02:11:48 +0800
Subject: [PATCH] update: anime page

---
 src/background/apis/anime.ts             |  1 +
 src/contentScripts/views/Anime/Anime.vue | 60 +++++++++++++++++++++++-
 src/contentScripts/views/Anime/types.ts  | 28 ++++++++++-
 3 files changed, 87 insertions(+), 2 deletions(-)

diff --git a/src/background/apis/anime.ts b/src/background/apis/anime.ts
index 4d301dde..0a5c601b 100644
--- a/src/background/apis/anime.ts
+++ b/src/background/apis/anime.ts
@@ -29,6 +29,7 @@ export const setupAnimeAPIs = () => {
         .then(data => data)
         .catch(error => console.error(error))
     }
+    // https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/bangumi/timeline.md#%E7%95%AA%E5%89%A7%E6%88%96%E5%BD%B1%E8%A7%86%E6%97%B6%E9%97%B4%E7%BA%BF
     else if (message.contentScriptQuery === 'getAnimeTimeTable') {
       const url
         = 'https://api.bilibili.com/pgc/web/timeline?types=1&before=6&after=6'
diff --git a/src/contentScripts/views/Anime/Anime.vue b/src/contentScripts/views/Anime/Anime.vue
index e0d355ab..b8033291 100644
--- a/src/contentScripts/views/Anime/Anime.vue
+++ b/src/contentScripts/views/Anime/Anime.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 // import PopularAnimeCarousel from './components/PopularAnimeCarousel.vue'
-import type { AnimeItem } from './types'
+import type { AnimeItem, AnimeTimeTableItem } from './types'
 import { getUserID, removeHttpFromUrl } from '~/utils'
 
 const recommendAnimeList = reactive<AnimeItem[]>([])
+const animeTimeTable = reactive<AnimeTimeTableItem[]>([])
 const animeWatchList = reactive<AnimeItem[]>([])
 const cursor = ref<number>(29) // 遊標默認必須要非0，否則第一次會出現同樣的結果
 const isLoading = ref<boolean>()
@@ -12,6 +13,7 @@ const activatedSeasonId = ref<number>()
 onMounted(() => {
   getRecommendAnimeList()
   getAnimeWatchList()
+  getAnimeTimeTable()
 
   window.onscroll = () => {
     if (
@@ -53,6 +55,18 @@ function getAnimeWatchList() {
     })
 }
 
+function getAnimeTimeTable() {
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'getAnimeTimeTable',
+    })
+    .then((res) => {
+      const { code, result } = res
+      if (code === 0)
+        Object.assign(animeTimeTable, result as AnimeTimeTableItem[])
+    })
+}
+
 function getRecommendAnimeList() {
   isLoading.value = true
   browser.runtime
@@ -159,6 +173,50 @@ function getRecommendAnimeList() {
         </HorizontalScrollView>
       </section>
 
+      <!-- Anime Timetable -->
+      <section mb-8>
+        <div flex justify-between items-end mb-6>
+          <h3 text="3xl $bew-text-1" font="bold">
+            Anime Timetable
+          </h3>
+        </div>
+
+        <HorizontalScrollView>
+          <ul flex="~">
+            <li
+              v-for="item in animeTimeTable"
+              :key="item.date_ts"
+              w="1/7"
+              pr-8
+              shrink-0
+            >
+              <h3 text="2xl" font-bold mb-6>
+                {{ item.date }}
+              </h3>
+
+              <ul grid gap-4>
+                <li v-for="episode in item.episodes" :key="episode.season_id" flex gap-4>
+                  <img
+                    :src="`${removeHttpFromUrl(episode.cover)}@144w_144h.webp`"
+                    :alt="episode.title"
+                    w-18
+                    h-18
+                    rounded="$bew-radius"
+                    shrink-0
+                  >
+                  <div flex="~ col">
+                    <p>{{ episode.title }}</p>
+                    <p mt-auto text="$bew-theme-color">
+                      {{ episode.pub_index }}
+                    </p>
+                  </div>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </HorizontalScrollView>
+      </section>
+
       <!-- Recommended for you -->
       <section>
         <h3 text="3xl $bew-text-1" font="bold" mb-6>
diff --git a/src/contentScripts/views/Anime/types.ts b/src/contentScripts/views/Anime/types.ts
index 995cc44f..8e1c48a8 100644
--- a/src/contentScripts/views/Anime/types.ts
+++ b/src/contentScripts/views/Anime/types.ts
@@ -28,7 +28,7 @@ export interface PopularAnime {
 
 export interface AnimeItem {
   cover: string
-  horizontal_cover_16_9: string
+  horizontal_cover_16_9?: string
   episode_id: number
   evaluate: string
   hover: {
@@ -60,3 +60,29 @@ export interface AnimeItem {
   total_count: number // 當前集數
   styles: string[] // 番劇風格
 }
+
+// https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/bangumi/timeline.md#%E8%8E%B7%E5%8F%96%E7%95%AA%E5%89%A7%E6%88%96%E5%BD%B1%E8%A7%86%E6%97%B6%E9%97%B4%E7%BA%BF
+export interface AnimeTimeTableItem {
+  date: string
+  date_ts: number
+  day_of_week: number
+  episodes: Array<{
+    cover: string
+    delay: number
+    delay_id: number
+    delay_index: string
+    delay_reason: string
+    ep_cover: string
+    episode_id: number
+    follows: string
+    plays: string
+    pub_index: string
+    pub_time: string
+    pub_ts: number
+    published: number
+    season_id: number
+    square_cover: string
+    title: string
+  }>
+  is_today: number
+}