From 56884103a703f44c704359bbbf1113746e98af7c Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Fri, 10 Feb 2023 01:24:22 +0800
Subject: [PATCH] feat: update anime page

---
 src/background/apis/history.ts               |   9 ++
 src/contentScripts/views/History/History.vue | 131 ++++++++++++++-----
 2 files changed, 104 insertions(+), 36 deletions(-)

diff --git a/src/background/apis/history.ts b/src/background/apis/history.ts
index 823ce6e9..ae39559a 100644
--- a/src/background/apis/history.ts
+++ b/src/background/apis/history.ts
@@ -2,6 +2,7 @@ import browser from 'webextension-polyfill'
 
 export const setupHistoryAPIs = () => {
   browser.runtime.onMessage.addListener((message) => {
+    // https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/history&toview/history.md#%E8%8E%B7%E5%8F%96%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95%E5%88%97%E8%A1%A8_web%E7%AB%AF
     if (message.contentScriptQuery === 'getHistoryList') {
       const url = `https://api.bilibili.com/x/web-interface/history/cursor?ps=20&type=${message.type}&view_at=${message.viewAt}`
       return fetch(url)
@@ -9,5 +10,13 @@ export const setupHistoryAPIs = () => {
         .then(data => (data))
         .catch(error => console.error(error))
     }
+    // https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/history&toview/history.md#%E5%88%A0%E9%99%A4%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95
+    else if (message.contentScriptQuery === 'deleteHistoryItem') {
+      const url = `https://api.bilibili.com/x/v2/history/delete?kid=${message.kid}&csrf=${message.csrf}`
+      return fetch(url)
+        .then(response => response.json())
+        .then(data => (data))
+        .catch(error => console.error(error))
+    }
   })
 }
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index 351ffbba..c8f76733 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -60,6 +60,10 @@ function getHistoryList() {
     })
 }
 
+function deleteHistoryItem() {
+
+}
+
 /**
  * Return the URL of the history item
  * @param item history item
@@ -82,6 +86,9 @@ function getHistoryUrl(item: HistoryItem) {
 
 <template>
   <div>
+    <h3 mb-6 text="3xl $bew-text-1" font-bold>
+      Watch History
+    </h3>
     <!-- historyList -->
     <transition-group name="list">
       <a
@@ -89,21 +96,63 @@ function getHistoryUrl(item: HistoryItem) {
         :key="historyItem.kid"
         :href="getHistoryUrl(historyItem)"
         target="_blank"
-        rounded="$bew-radius"
         block
-        p="2"
-        m="last:b-4"
         class="group"
-        hover:bg="$bew-fill-2"
-        duration-300
-        overflow-hidden
+        flex
       >
-        <section flex="~ gap-4" item-start>
-
-          <!-- Video -->
+        <div
+          mr-4
+          px-4
+          b-l="~ 2px dashed $bew-fill-2"
+          group-hover:b-l="$bew-theme-color-40"
+          flex
+          items-center
+          justify-center
+          shrink-0
+          relative
+          duration-300
+        >
+          <!-- Dot -->
+          <i
+            pos="absolute left--1px"
+            w-2
+            h-2
+            rounded-6
+            bg="$bew-fill-3"
+            group-hover:bg="$bew-theme-color"
+            transform="~ translate-x--1/2"
+            duration-300
+          />
           <div
-            pos="relative" bg="$bew-fill-5"
-            w="300px"
+            text="sm $bew-text-3"
+            group-hover:text="$bew-theme-color"
+            bg="$bew-fill-1"
+            group-hover:bg="$bew-theme-color-20"
+            p="x-3 y-1"
+            rounded-8
+            duration-300
+          >
+            {{
+              useDateFormat(historyItem.view_at * 1000, 'YYYY-MM-DD HH:mm:ss')
+                .value
+            }}
+          </div>
+        </div>
+        <section
+          rounded="$bew-radius"
+          flex="~ gap-4"
+          item-start
+          relative
+          group-hover:bg="$bew-fill-2"
+          duration-300
+          w-full
+          p="2"
+        >
+          <!-- Cover -->
+          <div
+            pos="relative"
+            bg="$bew-fill-5"
+            w="200px"
             flex="shrink-0"
             rounded="$bew-radius"
             overflow-hidden
@@ -113,7 +162,7 @@ function getHistoryUrl(item: HistoryItem) {
               class="aspect-video"
               :src="`${removeHttpFromUrl(historyItem.cover)}@672w_378h_1c`"
               :alt="historyItem.title"
-              bg="contain"
+              object-cover
             >
             <div
               pos="absolute bottom-0 right-0"
@@ -135,36 +184,46 @@ function getHistoryUrl(item: HistoryItem) {
             </div>
             <div w-full pos="absolute bottom-0" bg="white opacity-60">
               <Progress
-                :percentage="(historyItem.progress / historyItem.duration) * 100"
+                :percentage="
+                  (historyItem.progress / historyItem.duration) * 100
+                "
               />
             </div>
           </div>
 
           <!-- Description -->
-          <div>
-            <h3
-              class="keep-two-lines"
-              overflow="hidden"
-              text="lg overflow-ellipsis"
-            >
-              {{ historyItem.title }}
-            </h3>
-            <div text="$bew-text-2 sm" m="t-4" flex="~" align="items-center">
-              {{ historyItem.author_name }}
-              <span
-                v-if="historyItem.live_status === 1"
-                text="$bew-theme-color"
-                m="l-2"
-              ><tabler:live-photo />
-                Live
-              </span>
+          <div flex justify-between w-full>
+            <div>
+              <h3
+                class="keep-two-lines"
+                overflow="hidden"
+                text="lg overflow-ellipsis"
+              >
+                {{ historyItem.title }}
+              </h3>
+              <div text="$bew-text-2 sm" m="t-4" flex="~" items-center>
+                <img
+                  :src="historyItem.author_face"
+                  w-8
+                  aspect-square
+                  alt=""
+                  rounded="$bew-radius-half"
+                  mr-2
+                >
+                {{ historyItem.author_name }}
+                <!-- <span
+                  v-if="historyItem.live_status === 1"
+                  text="$bew-theme-color"
+                  m="l-2"
+                ><tabler:live-photo />
+                  Live
+                </span> -->
+              </div>
             </div>
-            <p text="$bew-text-2 sm">
-              {{
-                useDateFormat(historyItem.view_at * 1000, 'YYYY-MM-DD HH:mm:ss')
-                  .value
-              }}
-            </p>
+
+            <button text="2xl" p-4>
+              <tabler:trash />
+            </button>
           </div>
         </section>
       </a>