chore: Add new cSpell words and update props in VideoCard.vue and For…

…You.vue
starknt · Apr 3, 2024 · a75657a · a75657a
1 parent 92b8840
commit a75657a
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 27 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,7 @@
 {
   "cSpell.words": [
     "bilibili",
+    "unocss",
     "Vitesse",
     "webext"
   ],

diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
@@ -38,8 +38,7 @@ interface Props {
   moreBtnActive?: boolean
   removed?: boolean
   showDislikeOptions?: boolean
-  feedbackReason?: { id: number, name: string }
-  dislikeReason?: { id: number, name: string }
+  dislikeReasons?: { id: number, name: string }[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -162,19 +161,27 @@ function handleMoreBtnClick(event: MouseEvent) {
     <div hidden w="xl:280px lg:250px md:200px 200px" />
     <div hidden w="full" />
 
+    <template v-if="showDislikeOptions">
+      <div flex="~ gap-2 wrap">
+        <button
+          v-for="reason in dislikeReasons" :key="reason.id"
+          p="x-4 y-2" bg="$bew-fill-1 hover:$bew-fill-3" rounded="$bew-radius"
+          cursor-pointer
+        >
+          {{ reason.name }}
+        </button>
+      </div>
+    </template>
     <div
+      v-else
       class="video-card group"
       :class="isDislike ? 'is-dislike' : ''"
       w="full" pos="absolute top-0 left-0"
       rounded="$bew-radius" duration-300 ease-in-out
       bg="hover:$bew-fill-2 active:$bew-fill-3" hover:ring="8 $bew-fill-2" active:ring="8 $bew-fill-3"
       :style="{ contentVisibility }"
     >
-      <template v-if="showDislikeOptions">
-        fdsflsd
-      </template>
       <a
-        v-else
         :style="{ display: horizontal ? 'flex' : 'block', gap: horizontal ? '1.5rem' : '0' }"
         :href="videoUrl" target="_blank" rel="noopener noreferrer"
       >

diff --git a/src/contentScripts/views/Home/components/ForYou.vue b/src/contentScripts/views/Home/components/ForYou.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import { onClickOutside } from '@vueuse/core'
+import { Type as ThreePointV2Type } from '~/models/video/appForYou'
 import type { AppForYouResult, Item as AppVideoItem, ThreePointV2 } from '~/models/video/appForYou'
 import type { Item as VideoItem, forYouResult } from '~/models/video/forYou'
 import type { GridLayout } from '~/logic'
@@ -45,10 +46,6 @@ watch(() => settings.value.recommendationMode, () => {
   initData()
 })
 
-onClickOutside(videoCardRef, () => {
-  closeVideoOptions()
-})
-
 onMounted(async () => {
   // Delay by 0.2 seconds to obtain the `settings.value.recommendationMode` value
   // otherwise the `settings.value.recommendationMode` value will be undefined
@@ -180,12 +177,12 @@ async function getAppRecommendVideos() {
 }
 
 function handleMoreClick(e: MouseEvent, data: AppVideoItem) {
-  if (activatedVideo.value && activatedVideo.value.idx === data.idx) {
+  if (activatedVideo.value && activatedVideo.value?.idx === data.idx) {
     closeVideoOptions()
     return
   }
+
   showVideoOptions.value = true
-  // activatedVideo.value.idx = data.idx
   activatedVideo.value = data
   const osInstance = scrollbarRef.value?.osInstance()
   const scrollTop = osInstance.elements().viewport.scrollTop || 0
@@ -194,12 +191,18 @@ function handleMoreClick(e: MouseEvent, data: AppVideoItem) {
   videoOptionsPosition.left = `${e.clientX}px`
 }
 
-function handleMoreCommand(command: string) {
+function handleMoreCommand(command: ThreePointV2Type) {
   if (activatedVideo.value)
     dislikedVideoIds.value.push(activatedVideo.value.idx)
 
-  // eslint-disable-next-line no-empty
-  switch (command) {}
+  switch (command) {
+    case ThreePointV2Type.Feedback:
+      break
+    case ThreePointV2Type.Dislike:
+      dislikedVideoIds.value.push(activatedVideo.value!.idx)
+      closeVideoOptions()
+      break
+  }
 
   // if (command === 'close')
   //   closeVideoOptions()
@@ -210,11 +213,6 @@ function closeVideoOptions() {
   activatedVideo.value = null
 }
 
-// function handleVideoOptionsCommand(command: string) {
-//   if (command === 'close')
-//     closeVideoOptions()
-// }
-
 function jumpToLoginPage() {
   location.href = 'https://passport.bilibili.com/login'
 }
@@ -231,6 +229,10 @@ defineExpose({ initData })
 
     <!-- dislike popup -->
     <div v-show="showVideoOptions">
+      <div
+        pos="fixed top-0 left-0" w-full h-full z-1
+        @click="closeVideoOptions"
+      />
       <div
         style="backdrop-filter: var(--bew-filter-glass-1);"
         :style="{ transform: `translate(${videoOptionsPosition.left}, ${videoOptionsPosition.top})` }"
@@ -239,13 +241,15 @@ defineExpose({ initData })
         shadow="$bew-shadow-1" z-10
       >
         <ul flex="~ col gap-1">
-          <li
-            v-for="option in videoOptions" :key="option.type"
-            bg="hover:$bew-fill-2" p="x-4 y-2" rounded="$bew-radius-half" cursor-pointer
-            @click="handleMoreCommand('')"
-          >
-            {{ option.title }}
-          </li>
+          <template v-for="option in videoOptions" :key="option.type">
+            <li
+              v-if="option.type !== ThreePointV2Type.WatchLater"
+              bg="hover:$bew-fill-2" p="x-4 y-2" rounded="$bew-radius-half" cursor-pointer
+              @click="handleMoreCommand(option.type)"
+            >
+              {{ option.title }}
+            </li>
+          </template>
         </ul>
       </div>
     </div>
@@ -306,8 +310,10 @@ defineExpose({ initData })
           more-btn
           :more-btn-active="video.idx === activatedVideo?.idx"
           :show-dislike-options="dislikedVideoIds.includes(video.idx)"
+          :dislike-reasons="video.three_point_v2?.find(option => option.type === ThreePointV2Type.Dislike)?.reasons || []"
           @more-click="(e) => handleMoreClick(e, video)"
         />
+        <!-- :more-options="video.three_point_v2" -->
       </template>
 
       <!-- skeleton -->