From 17b5db88ec0b6bb779d5c29ffa1aeda6f1e736eb Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 29 Jan 2023 03:01:41 +0800
Subject: [PATCH] update: anime page

---
 src/_locales/cmn-CN.yml                  |   3 +
 src/_locales/cmn-TW.yml                  |   3 +
 src/_locales/en.yml                      |   3 +
 src/_locales/jyut.yml                    |   3 +
 src/components/HorizontalScrollView.vue  |  81 +++++++++++++++
 src/components/VideoCard/VideoCard.vue   |  10 +-
 src/contentScripts/views/Anime/Anime.vue | 120 ++++++++++++-----------
 src/styles/main.scss                     |   8 ++
 src/utils/index.ts                       |   9 ++
 9 files changed, 178 insertions(+), 62 deletions(-)
 create mode 100644 src/components/HorizontalScrollView.vue

diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml
index f431fee4..960df4af 100644
--- a/src/_locales/cmn-CN.yml
+++ b/src/_locales/cmn-CN.yml
@@ -116,3 +116,6 @@ home:
 anime:
   total_episodes: 全 {ep} 话
   update_to_n_episodes: 更新至 {ep} 话
+  your_watch_list: 正在追
+  recommended_for_you: 猜你喜欢
+  havent_seen: 尚未观看
diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml
index 56eac9a9..dacb9d70 100644
--- a/src/_locales/cmn-TW.yml
+++ b/src/_locales/cmn-TW.yml
@@ -111,3 +111,6 @@ home:
 anime:
   total_episodes: 全 {ep} 話
   update_to_n_episodes: 更新至 {ep} 話
+  your_watch_list: 正在追
+  recommended_for_you: 你或許想看
+  havent_seen: 暫未觀看
diff --git a/src/_locales/en.yml b/src/_locales/en.yml
index 65f862fe..91e74ed3 100644
--- a/src/_locales/en.yml
+++ b/src/_locales/en.yml
@@ -124,3 +124,6 @@ home:
 anime:
   total_episodes: EP {ep}
   update_to_n_episodes: Update to {ep} Episodes
+  your_watch_list: Your Watchlist 
+  recommended_for_you: Recommended for you
+  havent_seen: Haven't seen 
\ No newline at end of file
diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml
index 5ff8938d..a31063dc 100644
--- a/src/_locales/jyut.yml
+++ b/src/_locales/jyut.yml
@@ -116,3 +116,6 @@ home:
 anime:
   total_episodes: 共 {ep} 集
   update_to_n_episodes: 更新到 {ep} 集
+  your_watch_list: 追緊
+  recommended_for_you: 估你心水
+  havent_seen: 未曾睇過
diff --git a/src/components/HorizontalScrollView.vue b/src/components/HorizontalScrollView.vue
new file mode 100644
index 00000000..a74ebcb4
--- /dev/null
+++ b/src/components/HorizontalScrollView.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+
+const scrollListWrap = ref<HTMLElement>() as Ref<HTMLElement>
+const showLeftMask = ref<boolean>(false)
+const showRightMask = ref<boolean>(false)
+
+window.onload = () => {
+  scrollListWrap.value.addEventListener('scroll', () => {
+    if (scrollListWrap.value.scrollLeft > 0) {
+      showLeftMask.value = true
+      showRightMask.value = true
+    }
+    else {
+      showLeftMask.value = false
+      showRightMask.value = false
+    }
+
+    if (
+      scrollListWrap.value.scrollLeft + scrollListWrap.value.clientWidth
+      >= scrollListWrap.value.scrollWidth
+    ) {
+      showLeftMask.value = false
+      showRightMask.value = false
+    }
+  })
+  scrollListWrap.value.addEventListener('wheel', (event: WheelEvent) => {
+    event.preventDefault()
+    scrollListWrap.value.scrollLeft += event.deltaY
+  })
+}
+</script>
+
+<template>
+  <div relative>
+    <transition name="fade">
+      <div
+        v-show="showLeftMask"
+        h-full
+        w-80px
+        absolute
+        z-1
+        style="background: linear-gradient(to left, transparent, var(--bew-bg))"
+      />
+    </transition>
+    <transition name="fade">
+      <div
+        v-show="showRightMask"
+        h-full
+        w-80px
+        pos="absolute right-0"
+        z-1
+        style="
+          background: linear-gradient(to right, transparent, var(--bew-bg));
+        "
+      />
+    </transition>
+
+    <div
+      ref="scrollListWrap"
+      w-full
+      overflow-x-scroll
+      overflow-y-hidden
+      relative
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  --at-apply: opacity-0;
+}
+</style>
diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index 0eb8e9ee..6e195eac 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -215,18 +215,14 @@ function gotoChannel(mid: number) {
         <div class="meta" flex="~ col" w="full" align="items-start">
           <div flex="~" justify="between" w="full" pos="relative">
             <h3
-              class="video-title"
+              class="keep-two-lines"
               cursor="pointer"
               text="lg overflow-ellipsis space-normal $bew-text-1"
               h="max-13"
               overflow="hidden"
-              style="
-                display: -webkit-box;
-                -webkit-box-orient: vertical;
-                -webkit-line-clamp: 2;
-              "
             >
-              <a :href="videoUrl" target="_blank"> {{ videoData.title }}</a>
+              <a :href="videoUrl" target="_blank" :title="videoData.title">
+                {{ videoData.title }}</a>
             </h3>
 
             <!-- <div
diff --git a/src/contentScripts/views/Anime/Anime.vue b/src/contentScripts/views/Anime/Anime.vue
index 527858e9..7433e1c2 100644
--- a/src/contentScripts/views/Anime/Anime.vue
+++ b/src/contentScripts/views/Anime/Anime.vue
@@ -2,16 +2,13 @@
 import { useI18n } from 'vue-i18n'
 import PopularAnimeCarousel from './components/PopularAnimeCarousel.vue'
 import type { AnimeItem } from './types'
-import { getUserID } from '~/utils'
-
-const { t } = useI18n()
+import { getUserID, removeHttpFromUrl } from '~/utils'
 
 const recommendAnimeList = reactive<AnimeItem[]>([])
 const animeWatchList = reactive<AnimeItem[]>([])
 const cursor = ref<number>(29) // 遊標默認必須要非0，否則第一次會出現同樣的結果
 const isLoading = ref<boolean>()
 const activatedSeasonId = ref<number>()
-const watchListWrap = ref<HTMLElement>() as Ref<HTMLElement>
 
 onMounted(() => {
   getRecommendAnimeList()
@@ -28,11 +25,6 @@ onMounted(() => {
       getRecommendAnimeList()
     }
   }
-
-  watchListWrap.value.addEventListener('wheel', (event) => {
-    event.preventDefault()
-    watchListWrap.value.scrollLeft += event.deltaY
-  })
 })
 
 onUnmounted(() => {
@@ -55,7 +47,7 @@ function getAnimeWatchList() {
         data: { list },
       } = response
       if (code === 0)
-        Object.assign(animeWatchList, list)
+        Object.assign(animeWatchList, list as AnimeItem[])
     })
     .finally(() => {
       isLoading.value = false
@@ -99,59 +91,79 @@ function getRecommendAnimeList() {
       <section mb-8>
         <div flex justify-between items-end mb-6>
           <h3 text="3xl $bew-text-1" font="bold">
-            Your Watchlist
+            {{ $t('anime.your_watch_list') }}
           </h3>
           <a
             :href="`https://space.bilibili.com/${getUserID() ?? 0}/bangumi`"
             target="_blank"
             un-text="$bew-theme-color"
-          >{{ t('common.view_all') }}</a>
+          >{{ $t('common.view_all') }}</a>
         </div>
-        <div
-          ref="watchListWrap"
-          flex="~"
-          w="[calc(100%+1.5rem)]"
-          overflow-scroll
-          relative
-        >
-          <article
-            v-for="item in animeWatchList"
-            :key="item.episode_id"
-            w="2xl:[calc(100%/6-1.5rem)] xl:[calc(100%/5-1.5rem)] lg:[calc(100%/4-1.5rem)] md:[calc(100%/3-1.5rem)] [calc(100%/2-1.5rem)]"
-            shrink-0
-            m="r-6"
-          >
-            <a
-              rounded="$bew-radius"
-              aspect="12/16"
-              overflow-hidden
-              mb-4
-              bg="$bew-fill-3"
-              :href="item.url"
-              target="_blank"
+
+        <HorizontalScrollView w="[calc(100%+1.5rem)]">
+          <div w-full flex>
+            <article
+              v-for="item in animeWatchList"
+              :key="item.episode_id"
+              w="2xl:[calc(100%/6-1.5rem)] xl:[calc(100%/5-1.5rem)] lg:[calc(100%/4-1.5rem)] md:[calc(100%/3-1.5rem)] [calc(100%/2-1.5rem)]"
+              last:w="2xl:1/6 xl:1/5 lg:1/4 md:1/3 1/2"
+              shrink-0
+              m="r-6"
+              last:pr-6
             >
-              <img
-                :src="`${item.cover.replace('https:', '')}@466w_622h.webp`"
-                :alt="item.title"
+              <a
                 rounded="$bew-radius"
+                aspect="12/16"
+                overflow-hidden
+                mb-4
+                bg="$bew-fill-3"
+                :href="item.url"
+                target="_blank"
               >
-            </a>
-            <p un-text="lg" my-4>
-              <a :href="item.url" target="_blank">
-                {{ item.title }}
+                <img
+                  :src="`${removeHttpFromUrl(item.cover)}@466w_622h.webp`"
+                  :alt="item.title"
+                  rounded="$bew-radius"
+                >
               </a>
-            </p>
-            <p text="$bew-text-2" mb-10>
-              {{ item.progress !== '' ? item.progress : `Haven't seen` }}
-            </p>
-          </article>
-        </div>
+              <p un-text="lg" my-4>
+                <a
+                  :href="item.url"
+                  target="_blank"
+                  class="keep-two-lines"
+                  :title="item.title"
+                >
+                  {{ 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
+                  lh-loose
+                >{{
+                  item.is_finish
+                    ? $t('anime.total_episodes', { ep: item.total_count })
+                    : $t('anime.update_to_n_episodes', {
+                      ep: item.total_count,
+                    })
+                }}</span>
+                {{
+                  item.progress !== '' ? item.progress : $t('anime.havent_seen')
+                }}
+              </p>
+            </article>
+          </div>
+        </HorizontalScrollView>
       </section>
 
       <!-- Recommended for you -->
       <section>
         <h3 text="3xl $bew-text-1" font="bold" mb-6>
-          Recommended for you
+          {{ $t('anime.recommended_for_you') }}
         </h3>
         <div grid="~ 2xl:cols-6 xl:cols-5 lg:cols-4 md:cols-3 cols-2 gap-6">
           <article
@@ -210,9 +222,8 @@ function getRecommendAnimeList() {
                   transition="all duration-300"
                   bg="cover center"
                   :style="{
-                    backgroundImage: `url(${item.cover.replace(
-                      'http:',
-                      '',
+                    backgroundImage: `url(${removeHttpFromUrl(
+                      item.cover,
                     )}@466w_622h.webp)`,
                   }"
                 />
@@ -228,9 +239,8 @@ function getRecommendAnimeList() {
                   pos="absolute top-0 left-0"
                   z--1
                   :style="{
-                    backgroundImage: `url(${item.hover.img.replace(
-                      'http:',
-                      '',
+                    backgroundImage: `url(${removeHttpFromUrl(
+                      item.hover.img,
                     )}@672w_378h_1c.webp)`,
                   }"
                   style="
@@ -246,7 +256,7 @@ function getRecommendAnimeList() {
             </div>
 
             <p un-text="lg" my-4>
-              <a :href="item.link" target="_blank">
+              <a :href="item.link" target="_blank" class="keep-two-lines">
                 {{ item.title }}
               </a>
             </p>
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 32ea2b67..2181b09f 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -18,6 +18,14 @@ body {
   color: var(--bew-text-1);
 }
 
+.keep-two-lines {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
 .btn {
   @apply px-4 py-2 rounded-$bew-radius inline-block
     cursor-pointer transform duration-300
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 5f5d4497..e3f1029b 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -39,3 +39,12 @@ export const getUserID = () => getCookie('DedeUserID')
  * get csrf token
  */
 export const getCSRF = () => getCookie('bili_jct')
+
+/**
+ * remove 'http://' or 'https://' from a URL
+ * @param url
+ * @returns
+ */
+export const removeHttpFromUrl = (url: string) => {
+  return url.replace(/^https?:/, '')
+}