update: anime page

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: 尚未观看

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: 暫未觀看

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 

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: 未曾睇過

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>

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

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>

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

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?:/, '')
+}