From ed83b6b6a886d5a1f5e91268f99e48b8a43c9dd4 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 11 Dec 2022 02:28:30 +0800
Subject: [PATCH] refactor: separating the video code into VideoCard

---
 src/background/apis/videos.ts                 |   3 +-
 src/components/VideoCard.vue                  | 345 ++++++++++++++++++
 .../views/Home/RecommendContent.vue           | 335 +----------------
 3 files changed, 365 insertions(+), 318 deletions(-)
 create mode 100644 src/components/VideoCard.vue

diff --git a/src/background/apis/videos.ts b/src/background/apis/videos.ts
index 09e1184e..85ea829b 100644
--- a/src/background/apis/videos.ts
+++ b/src/background/apis/videos.ts
@@ -2,9 +2,10 @@ import browser from 'webextension-polyfill'
 import { APP_URL } from '.'
 
 export const setupVideosAPIs = () => {
-  browser.runtime.onMessage.addListener(message => {
+  browser.runtime.onMessage.addListener((message) => {
     /** Recommend Videos */
     if (message.contentScriptQuery === 'getRecommendVideos') {
+      // https://github.com/indefined/UserScripts/blob/master/bilibiliHome/bilibiliHome.API.md#%E8%8E%B7%E5%8F%96%E9%A6%96%E9%A1%B5%E5%86%85%E5%AE%B9
       const url = `${APP_URL}/x/feed/index?build=1&idx=${message.idx}&appkey=27eb53fc9058f8c3&access_key=${message.accessKey}`
       return fetch(url)
         .then(response => response.json())
diff --git a/src/components/VideoCard.vue b/src/components/VideoCard.vue
new file mode 100644
index 00000000..2cdc307b
--- /dev/null
+++ b/src/components/VideoCard.vue
@@ -0,0 +1,345 @@
+<script lang="ts" setup>
+import { accessKey, language } from '~/logic/index'
+import { calcCurrentTime, calcTimeSince, numFormatter } from '~/utils'
+import { LanguageType } from '~/enums/appEnums'
+
+defineProps<{
+  cover: string
+  duration: number
+  mid: number
+  title: string
+  authorAvatar: string
+  param: string
+  viewCount: number
+  channelName: string
+  // Created time
+  ctime: number
+  dislikeReasons: Array<{ reason_id: number; reason_name: string }>
+  goto: string
+  tid: number
+  tag: { tag_id: number; tag_name: string }
+}>()
+
+const isDislike = ref<boolean>(false)
+const dislikeReasonId = ref<number | null>(null)
+const showPopCtrl = ref<boolean>(false)
+
+function gotoChannel(mid: number) {
+  window.open(`//space.bilibili.com/${mid}`)
+}
+
+function gotoVideo(param: string) {
+  window.open(`/video/av${param}`)
+}
+
+function submitDislike(
+  reasonID: number,
+  goto: string,
+  id: string,
+  mid: number,
+  rid: number,
+  tagID: number,
+) {
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'submitDislike',
+      accessKey,
+      reasonID,
+      goto,
+      id,
+      mid,
+      rid,
+      tagID,
+    })
+    .then((res) => {
+      if (res.code === 0) {
+        isDislike.value = true
+        dislikeReasonId.value = reasonID
+      }
+    })
+}
+
+function undoDislike(
+  reasonID: number,
+  goto: string,
+  id: string,
+  mid: number,
+  rid: number,
+  tagID: number,
+) {
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'undoDislike',
+      accessKey,
+      reasonID,
+      goto,
+      id,
+      mid,
+      rid,
+      tagID,
+    })
+    .then((res) => {
+      if (res.code === 0) {
+        isDislike.value = false
+        dislikeReasonId.value = null
+        showPopCtrl.value = false
+      }
+    })
+}
+</script>
+
+<template>
+  <div
+    class="video-card group" :class="isDislike ? 'is-dislike' : ''"
+  >
+    <!-- Undo control -->
+    <template v-if="isDislike">
+      <div
+        id="dislike-control"
+        pos="absolute top-0 left-0"
+        w="full"
+        h="auto"
+        flex="~ col"
+        justify="center"
+        align="content-center"
+        border="solid $bew-fill-1"
+        text="$bew-text-3 sm center"
+        rounded="$bew-radius"
+        style="aspect-ratio: 16/9"
+      >
+        {{ $t('home.video_removed') }}
+        <button
+          text="$bew-theme-color base"
+          font="bold"
+          m="t-4"
+          @click="
+            undoDislike(
+              dislikeReasonId ? dislikeReasonId : 0,
+              goto,
+              param,
+              mid,
+              tid,
+              tag.tag_id,
+            )
+          "
+        >
+          {{ $t('common.undo') }}
+        </button>
+      </div>
+    </template>
+    <template v-else>
+      <a :href="`/video/av${param}`" target="_blank">
+        <div class="thumbnail">
+          <div class="duration">{{ calcCurrentTime(duration) }}</div>
+          <div
+            w="full"
+            pos="relative"
+            border="rounded-$bew-radius"
+            overflow="hidden"
+            z="1"
+            style="aspect-ratio: 16/9;"
+          >
+            <img
+              class="cover"
+              :src="`${cover.replace('http:', '')}@672w_378h_1c`"
+              loading="lazy"
+            >
+          </div>
+          <img
+            class="cover-shadow"
+            :src="`${cover.replace('http:', '')}@672w_378h_1c`"
+            loading="lazy"
+          >
+        </div>
+      </a>
+      <div class="detail">
+        <div class="flex">
+          <a class="avatar" cursor="pointer" @click="gotoChannel(mid)">
+            <img
+              :src="`${`${authorAvatar}`.replace('http:', '')}@60w_60h_1c`"
+              width="48"
+              height="48"
+              loading="lazy"
+            >
+          </a>
+        </div>
+        <div class="meta">
+          <div flex="~" justify="between" w="full" pos="relative">
+            <h3
+              class="video-title"
+              :title="title"
+              cursor="pointer"
+              @click="gotoVideo(param)"
+            >
+              {{ title }}
+            </h3>
+
+            <div
+              id="dislike-control-btn"
+              class="icon-btn"
+              p="t-0.15rem x-2"
+              pointer="auto"
+              display="invisible"
+              group-hover:display="visible"
+              @click.stop="showPopCtrl = !showPopCtrl"
+            >
+              <tabler:dots-vertical text="lg" />
+            </div>
+
+            <!-- dislike control -->
+            <template v-if="showPopCtrl">
+              <!-- cover mask -->
+              <div
+                pos="fixed top-0 left-0"
+                w="full"
+                h="full"
+                z="30"
+                @click="showPopCtrl = false"
+              />
+
+              <div
+                pos="absolute top-9 right-0"
+                p="2"
+                z="30"
+                w="180px"
+                bg="$bew-content-1"
+                rounded="$bew-radius"
+                style="
+              box-shadow: var(--bew-shadow-2);
+              backdrop-filter: var(--bew-filter-glass);
+            "
+              >
+                <p p="2" text="$bew-text-3">
+                  {{ $t('home.not_interested_in') }}
+                </p>
+                <ul>
+                  <li
+                    v-for="reason in dislikeReasons"
+                    :key="reason.reason_id"
+                    p="2"
+                    m="b-1"
+                    cursor="pointer"
+                    hover:bg="$bew-fill-2"
+                    transition="all duration-300"
+                    rounded="$bew-radius"
+                    @click.stop="
+                      submitDislike(
+                        reason.reason_id,
+                        goto,
+                        param,
+                        mid,
+                        tid,
+                        tag.tag_id,
+                      )
+                    "
+                  >
+                    {{ reason.reason_name }}
+                  </li>
+                </ul>
+              </div>
+            </template>
+          </div>
+          <div class="channel-name" @click="gotoChannel(mid)">
+            {{ channelName }}
+          </div>
+          <div class="video-info">
+            {{ numFormatter(viewCount)
+            }}{{
+              language === LanguageType.English
+                ? ` ${$t('common.view', viewCount)}`
+                : $t('common.view', viewCount)
+            }}
+            <span class="text-xs font-light">•</span>
+            {{ calcTimeSince(ctime * 1000)
+            }}{{
+              language === LanguageType.English
+                ? ` ${$t('common.ago')}`
+                : $t('common.ago')
+            }}
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.video-card {
+  @apply p-1 mb-8 rounded-$bew-radius duration-300
+    relative
+    active:bg-$bew-fill-2;
+
+  &.is-dislike {
+    > *:not(#dislike-control) {
+      @apply invisible pointer-events-none duration-0 transition-none;
+    }
+  }
+
+  .cover-shadow {
+    @apply absolute top-0 left-0 w-full h-full filter -z-1
+      pointer-events-none duration-600 rounded-$bew-radius opacity-70;
+    aspect-ratio: 16/9;
+  }
+
+  &:hover .cover-shadow {
+    @apply blur-2xl transform;
+  }
+
+  .thumbnail {
+    @apply w-full rounded-$bew-radius relative duration-300;
+    aspect-ratio: 16/9;
+
+    .duration {
+      @apply absolute z-2 bottom-0 right-0 px-2 py-1
+        m-1 rounded-$bew-radius text-xs
+        text-white
+        bg-black bg-opacity-60;
+    }
+
+    .cover {
+      @apply w-full h-full bg-cover bg-center transform scale-110 duration-300
+        absolute bg-$bew-fill-3;
+      aspect-ratio: 16/9;
+    }
+  }
+
+  &:hover .thumbnail {
+    @apply transform scale-105;
+  }
+
+  &:hover .cover {
+    @apply transform scale-100;
+  }
+
+  .detail {
+    @apply flex mt-4;
+
+    .avatar {
+      @apply mr-4 h-48px rounded-$bew-radius overflow-hidden
+        object-center object-cover
+        bg-$bew-fill-3;
+    }
+
+    .meta {
+      @apply flex flex-col items-start '!w-full';
+
+      .video-title {
+        @apply text-lg max-h-13 overflow-hidden overflow-ellipsis whitespace-normal
+         text-$bew-text-1;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+      }
+
+      .channel-name,
+      .video-info {
+        @apply text-base text-$bew-text-2;
+      }
+
+      .channel-name {
+        @apply mt-2;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/contentScripts/views/Home/RecommendContent.vue b/src/contentScripts/views/Home/RecommendContent.vue
index 82d57996..9b75debe 100644
--- a/src/contentScripts/views/Home/RecommendContent.vue
+++ b/src/contentScripts/views/Home/RecommendContent.vue
@@ -69,67 +69,6 @@ export default defineComponent({
         }
       }
     },
-    gotoChannel(mid: number) {
-      window.open(`//space.bilibili.com/${mid}`)
-    },
-    gotoVideo(uri: string) {
-      window.open(`/video/av${uri.split('/')[3]}`)
-    },
-    submitDislike(
-      videoIndex: number,
-      reasonID: number,
-      goto: string,
-      id: string,
-      mid: string,
-      rid: string,
-      tagID: string,
-    ) {
-      browser.runtime
-        .sendMessage({
-          contentScriptQuery: 'submitDislike',
-          accessKey: this.accessKey,
-          reasonID,
-          goto,
-          id,
-          mid,
-          rid,
-          tagID,
-        })
-        .then((res) => {
-          if (res.code === 0) {
-            this.videoList[videoIndex].isDislike = true
-            this.videoList[videoIndex].selectedReasonID = reasonID
-          }
-        })
-    },
-    undoDislike(
-      videoIndex: number,
-      reasonID: number,
-      goto: string,
-      id: string,
-      mid: string,
-      rid: string,
-      tagID: string,
-    ) {
-      browser.runtime
-        .sendMessage({
-          contentScriptQuery: 'undoDislike',
-          accessKey: this.accessKey,
-          reasonID,
-          goto,
-          id,
-          mid,
-          rid,
-          tagID,
-        })
-        .then((res) => {
-          if (res.code === 0) {
-            this.videoList[videoIndex].isDislike = false
-            this.videoList[videoIndex].selectedReasonID = undefined
-            this.videoList[videoIndex].openControl = false
-          }
-        })
-    },
     onRefresh() {
       this.isLoading = true
       this.videoList = []
@@ -148,184 +87,25 @@ export default defineComponent({
     m="lg:x-22 <lg:x-16 b-0 t-0"
     grid="~ xl:cols-4 lg:cols-3 md:cols-2 gap-4"
   >
-    <transition-group name="list" @enter="onEnter">
-      <div
-        v-for="(video, index) in videoList"
+    <TransitionGroup name="list" @enter="onEnter">
+      <VideoCard
+        v-for="(video) in videoList"
         :key="video.idx"
-        :data-index="index"
-        class="video-card"
-        :class="video.isDislike ? 'is-dislike' : ''"
-      >
-        <!-- Undo control -->
-        <template v-if="video.isDislike">
-          <div
-            id="dislike-control"
-            pos="absolute top-0 left-0"
-            w="full"
-            h="auto"
-            flex="~ col"
-            justify="center"
-            align="content-center"
-            border="solid $bew-fill-1"
-            text="$bew-text-3 sm center"
-            rounded="$bew-radius"
-            style="aspect-ratio: 16/9"
-          >
-            {{ $t('home.video_removed') }}
-            <button
-              text="$bew-theme-color base"
-              font="bold"
-              m="t-4"
-              @click="
-                undoDislike(
-                  index,
-                  video.selectedReasonID,
-                  video.goto,
-                  video.param,
-                  video.mid,
-                  video.tid,
-                  video.tag.tag_id,
-                )
-              "
-            >
-              {{ $t('common.undo') }}
-            </button>
-          </div>
-        </template>
-        <template v-else>
-          <a :href="`/video/av${video.uri.split('/')[3]}`" target="_blank">
-            <div class="thumbnail">
-              <div class="duration">{{ calcCurrentTime(video.duration) }}</div>
-              <div
-                class="overflow-hidden w-full relative rounded-$bew-radius z-1"
-                style="aspect-ratio: 16/9"
-              >
-                <img
-                  class="cover"
-                  :src="`${video.cover.replace('http:', '')}@672w_378h_1c`"
-                  loading="lazy"
-                >
-              </div>
-              <img
-                class="cover-shadow"
-                :src="`${video.cover.replace('http:', '')}@672w_378h_1c`"
-                loading="lazy"
-              >
-            </div>
-          </a>
-          <div class="detail">
-            <div class="flex">
-              <a
-                class="avatar"
-                cursor="pointer"
-                @click="gotoChannel(video.mid)"
-              >
-                <img
-                  :src="`${`${video.face}`.replace('http:', '')}@60w_60h_1c`"
-                  width="48"
-                  height="48"
-                  loading="lazy"
-                >
-              </a>
-            </div>
-            <div class="meta">
-              <div flex="~" justify="between" w="full" pos="relative">
-                <h3
-                  class="video-title"
-                  :title="video.title"
-                  cursor="pointer"
-                  @click="gotoVideo(video.uri)"
-                >
-                  {{ video.title }}
-                </h3>
-
-                <div
-                  id="dislike-control-btn"
-                  class="icon-btn"
-                  p="t-0.15rem x-2"
-                  pointer="auto"
-                  @click.stop="video.openControl = !video.openControl"
-                >
-                  <tabler:dots-vertical text="lg" />
-                </div>
-
-                <!-- dislike control -->
-                <template v-if="video.openControl">
-                  <!-- cover mask -->
-                  <div
-                    pos="fixed top-0 left-0"
-                    w="full"
-                    h="full"
-                    z="30"
-                    @click="video.openControl = false"
-                  />
-
-                  <div
-                    pos="absolute top-9 right-0"
-                    p="2"
-                    z="30"
-                    w="180px"
-                    bg="$bew-content-1"
-                    rounded="$bew-radius"
-                    style="
-                      box-shadow: var(--bew-shadow-2);
-                      backdrop-filter: var(--bew-filter-glass);
-                    "
-                  >
-                    <p p="2" text="$bew-text-3">
-                      {{ $t('home.not_interested_in') }}
-                    </p>
-                    <ul>
-                      <li
-                        v-for="reason in video.dislike_reasons"
-                        :key="reason.reason_id"
-                        p="2"
-                        m="b-1"
-                        cursor="pointer"
-                        hover:bg="$bew-fill-2"
-                        transition="all duration-300"
-                        rounded="$bew-radius"
-                        @click.stop="
-                          submitDislike(
-                            index,
-                            reason.reason_id,
-                            video.goto,
-                            video.param,
-                            video.mid,
-                            video.tid,
-                            video.tag.tag_id,
-                          )
-                        "
-                      >
-                        {{ reason.reason_name }}
-                      </li>
-                    </ul>
-                  </div>
-                </template>
-              </div>
-              <div class="channel-name" @click="gotoChannel(video.mid)">
-                {{ video.name }}
-              </div>
-              <div class="video-info">
-                {{ numFormatter(video.play)
-                }}{{
-                  language === LanguageType.English
-                    ? ` ${$t('common.view', video.play)}`
-                    : $t('common.view', video.play)
-                }}
-                <span class="text-xs font-light">•</span>
-                {{ calcTimeSince(new Date(video.ctime * 1000))
-                }}{{
-                  language === LanguageType.English
-                    ? ` ${$t('common.ago')}`
-                    : $t('common.ago')
-                }}
-              </div>
-            </div>
-          </div>
-        </template>
-      </div>
-    </transition-group>
+        :cover="video.cover"
+        :duration="video.duration"
+        :mid="video.mid"
+        :title="video.title"
+        :author-avatar="video.face"
+        :param="video.param"
+        :view-count="video.play"
+        :channel-name="video.name"
+        :ctime="video.ctime"
+        :dislike-reasons="video.dislike_reasons"
+        :goto="video.goto"
+        :tid="video.tid"
+        :tag="video.tag"
+      />
+    </TransitionGroup>
   </div>
 
   <loading v-if="isLoading" />
@@ -370,83 +150,4 @@ export default defineComponent({
 .list-leave-active {
   display: none;
 }
-
-.video-card {
-  @apply p-1 mb-8 rounded-$bew-radius duration-300
-    relative
-    active:bg-$bew-fill-2;
-
-  &.is-dislike {
-    > *:not(#dislike-control) {
-      @apply invisible pointer-events-none duration-0 transition-none;
-    }
-  }
-
-  .cover-shadow {
-    @apply absolute top-0 left-0 w-full h-full filter -z-1
-      pointer-events-none duration-600 rounded-$bew-radius opacity-70;
-    aspect-ratio: 16/9;
-  }
-
-  &:hover .cover-shadow {
-    @apply blur-2xl transform;
-  }
-
-  .thumbnail {
-    @apply w-full rounded-$bew-radius relative duration-300;
-    aspect-ratio: 16/9;
-
-    .duration {
-      @apply absolute z-2 bottom-0 right-0 px-2 py-1
-        m-1 rounded-$bew-radius text-xs
-        text-white
-        bg-black bg-opacity-60;
-    }
-
-    .cover {
-      @apply w-full h-full bg-cover bg-center transform scale-110 duration-300
-        absolute bg-$bew-fill-3;
-      aspect-ratio: 16/9;
-    }
-  }
-
-  &:hover .thumbnail {
-    @apply transform scale-105;
-  }
-
-  &:hover .cover {
-    @apply transform scale-100;
-  }
-
-  .detail {
-    @apply flex mt-4;
-
-    .avatar {
-      @apply mr-4 h-48px rounded-$bew-radius overflow-hidden
-        object-center object-cover
-        bg-$bew-fill-3;
-    }
-
-    .meta {
-      @apply flex flex-col items-start '!w-full';
-
-      .video-title {
-        @apply text-lg max-h-13 overflow-hidden overflow-ellipsis whitespace-normal
-         text-$bew-text-1;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-      }
-
-      .channel-name,
-      .video-info {
-        @apply text-base text-$bew-text-2;
-      }
-
-      .channel-name {
-        @apply mt-2;
-      }
-    }
-  }
-}
 </style>