From eaa021e7ba4565735a98d15e59772db4df2cf6c6 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sat, 5 Oct 2024 19:09:12 +0800
Subject: [PATCH] refactor: extract video context menu and dislike dialog logic
 to other files

---
 src/components/VideoCard/VideoCard.vue        | 102 +++++--
 .../VideoCardContextMenu.vue                  | 116 ++++++++
 .../components/DislikeDialog.vue              | 143 ++++++++++
 .../views/Home/components/ForYou.vue          | 262 +-----------------
 4 files changed, 349 insertions(+), 274 deletions(-)
 create mode 100644 src/components/VideoCard/VideoCardContextMenu/VideoCardContextMenu.vue
 create mode 100644 src/components/VideoCard/VideoCardContextMenu/components/DislikeDialog.vue

diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index 2e5690ad..48e12167 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -1,29 +1,38 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue'
+import type { CSSProperties } from 'vue'
+import { useToast } from 'vue-toastification'
 
 import Button from '~/components/Button.vue'
 import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
-import { settings } from '~/logic'
+import { accessKey, settings } from '~/logic'
+import type { ThreePointV2 } from '~/models/video/appForYou'
 import type { VideoPreviewResult } from '~/models/video/videoPreview'
+import { getTvSign, TVAppKey } from '~/utils/authProvider'
 import { calcCurrentTime, calcTimeSince, numFormatter } from '~/utils/dataFormatter'
 import { getCSRF, removeHttpFromUrl } from '~/utils/main'
 
 import Tooltip from '../Tooltip.vue'
+import VideoCardContextMenu from './VideoCardContextMenu/VideoCardContextMenu.vue'
 import VideoCardSkeleton from './VideoCardSkeleton.vue'
 
+const props = withDefaults(defineProps<Props>(), {
+  showWatcherLater: true,
+})
+
 interface Props {
   skeleton?: boolean
   video?: Video
+  /** 是否爲app端推介，用於調用不同取消不感興趣方法 */
+  isApp?: boolean
   showWatcherLater?: boolean
   horizontal?: boolean
   showPreview?: boolean
   moreBtn?: boolean
-  moreBtnActive?: boolean
-  removed?: boolean
 }
 
-interface Video {
+export interface Video {
   id: number
   duration?: number
   durationStr?: string
@@ -43,6 +52,7 @@ interface Video {
   capsuleText?: string
   bvid?: string
   aid?: number
+  goto?: string
   /** After set the `url`, clicking the video will navigate to this url. It won't be affected by aid, bvid or epid */
   url?: string
   /** If you want to show preview video, you should set the cid value */
@@ -52,20 +62,22 @@ interface Video {
   tag?: string
   rank?: number
   type?: 'horizontal' | 'vertical' | 'bangumi'
+  threePointV2: ThreePointV2[]
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  showWatcherLater: true,
-})
-
-const emit = defineEmits<{
-  (e: 'moreClick', event: MouseEvent): MouseEvent
-  (e: 'undo'): void
-  (e: 'tellUsWhy'): void
-}>()
-
+const toast = useToast()
+const { mainAppRef } = useBewlyApp()
 const api = useApiClient()
 const { openIframeDrawer } = useBewlyApp()
+const showVideoOptions = ref<boolean>(false)
+const videoOptionsFloatingStyles = ref<CSSProperties>({})
+// Whether the user has marked it as disliked
+const removed = ref<boolean>(false)
+
+const moreBtnRef = ref<HTMLDivElement | null>(null)
+const contextMenuRef = ref<HTMLDivElement | null>(null)
+
+const selectedDislikeOpt = ref<{ dislikeReasonId: number }>()
 
 function getCurrentVideoUrl(video: Video) {
   const baseUrl = `https://www.bilibili.com/video/${video.bvid ?? `av${video.aid}`}`
@@ -74,7 +86,7 @@ function getCurrentVideoUrl(video: Video) {
 }
 
 const videoUrl = computed(() => {
-  if (props.removed || !props.video)
+  if (removed.value || !props.video)
     return undefined
 
   if (props.video.url)
@@ -197,11 +209,50 @@ function handleClick(event: MouseEvent) {
 }
 
 function handleMoreBtnClick(event: MouseEvent) {
-  emit('moreClick', event)
+  videoOptionsFloatingStyles.value = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    transform: `translate(${event.x}px, ${event.y}px)`,
+  }
+  showVideoOptions.value = true
 }
 
 function handleUndo() {
-  emit('undo')
+  if (props.isApp) {
+    const params = {
+      access_key: accessKey.value,
+      goto: props.video?.goto,
+      id: props.video?.id,
+      // https://github.com/magicdawn/bilibili-app-recommend/blob/cb51f75f415f48235ce048537f2013122c16b56b/src/components/VideoCard/card.service.ts#L115
+      idx: Number((Date.now() / 1000).toFixed(0)),
+      reason_id: selectedDislikeOpt.value?.dislikeReasonId, // 1 means dislike, e.g. {"id": 1, "name": "不感兴趣","toast": "将减少相似内容推荐"}
+      build: 74800100,
+      device: 'pad',
+      mobi_app: 'iphone',
+      appkey: TVAppKey.appkey,
+    }
+
+    api.video.undoDislikeVideo({
+      ...params,
+      sign: getTvSign(params),
+    }).then((res) => {
+      if (res.code === 0) {
+        removed.value = false
+      }
+      else {
+        toast.error(res.message)
+      }
+    })
+  }
+  else {
+    removed.value = false
+  }
+}
+
+function handleRemoved(selectedOpt: { dislikeReasonId: number }) {
+  selectedDislikeOpt.value = selectedOpt
+  removed.value = true
 }
 </script>
 
@@ -415,8 +466,9 @@ function handleUndo() {
 
                 <div
                   v-if="moreBtn"
+                  ref="moreBtnRef"
                   class="opacity-0 group-hover/desc:opacity-100"
-                  :class="{ 'more-active': moreBtnActive }"
+                  :class="{ 'more-active': showVideoOptions }"
                   shrink-0 w-30px h-30px m="t--3px r--8px" translate-x--8px
                   grid place-items-center cursor-pointer rounded="50%" duration-300
                   @click.stop.prevent="handleMoreBtnClick"
@@ -522,6 +574,20 @@ function handleUndo() {
       :horizontal="horizontal"
       important-mb-0
     />
+
+    <!-- context menu -->
+    <Teleport
+      v-if="showVideoOptions && video"
+      :to="mainAppRef"
+    >
+      <VideoCardContextMenu
+        ref="contextMenuRef"
+        :video="video"
+        :context-menu-styles="videoOptionsFloatingStyles"
+        @close="showVideoOptions = false"
+        @removed="handleRemoved"
+      />
+    </Teleport>
   </div>
 </template>
 
diff --git a/src/components/VideoCard/VideoCardContextMenu/VideoCardContextMenu.vue b/src/components/VideoCard/VideoCardContextMenu/VideoCardContextMenu.vue
new file mode 100644
index 00000000..ba2abc61
--- /dev/null
+++ b/src/components/VideoCard/VideoCardContextMenu/VideoCardContextMenu.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+
+import { settings } from '~/logic'
+import { Type as ThreePointV2Type } from '~/models/video/appForYou'
+
+import type { Video } from '../VideoCard.vue'
+import DislikeDialog from './components/DislikeDialog.vue'
+
+defineProps<{
+  video: Video
+  contextMenuStyles: CSSProperties
+}>()
+
+const emit = defineEmits<{
+  (event: 'removed', selectedOpt?: { dislikeReasonId: number }): void
+  (event: 'close'): void
+}>()
+
+const videoOptions = reactive<{ id: number, name: string }[]>([
+  { id: 1, name: '不感兴趣' },
+  { id: 2, name: '不想看此UP主' },
+])
+const showContextMenu = ref<boolean>(false)
+const showDislikeDialog = ref<boolean>(false)
+
+onMounted(() => {
+  showContextMenu.value = true
+})
+
+function handleMoreCommand(_command: number) {
+  handleRemoved()
+}
+
+function handleAppMoreCommand(command: ThreePointV2Type) {
+  switch (command) {
+    case ThreePointV2Type.Feedback:
+      break
+    case ThreePointV2Type.Dislike:
+      openAppDislikeDialog()
+      break
+  }
+}
+
+function openAppDislikeDialog() {
+  showDislikeDialog.value = true
+  showContextMenu.value = false
+}
+
+function handleClose() {
+  showContextMenu.value = false
+  emit('close')
+  nextTick(() => {
+  })
+}
+
+function handleRemoved(selectedOpt?: { dislikeReasonId: number }) {
+  emit('removed', selectedOpt)
+  handleClose()
+}
+</script>
+
+<template>
+  <div>
+    <Transition name="fade">
+      <!-- more popup -->
+      <div v-if="showContextMenu">
+        <div
+          style="backdrop-filter: var(--bew-filter-glass-1);"
+          :style="contextMenuStyles"
+          p-2 bg="$bew-elevated" rounded="$bew-radius"
+          w-150px m="t-4 l-[calc(-150px+1rem)]"
+          shadow="$bew-shadow-1" z-10
+        >
+          <ul flex="~ col gap-1">
+            <template v-if="settings.recommendationMode === 'app'">
+              <template v-for="option in video.threePointV2" :key="option.type">
+                <li
+                  v-if="option.type !== ThreePointV2Type.WatchLater && option.type !== ThreePointV2Type.Feedback"
+                  bg="hover:$bew-fill-2" p="x-4 y-2" rounded="$bew-radius-half" cursor-pointer
+                  @click="handleAppMoreCommand(option.type)"
+                >
+                  <span v-if="option.type === ThreePointV2Type.Dislike">{{ $t('home.not_interested') }}</span>
+                  <span v-else>{{ option.title }}</span>
+                </li>
+              </template>
+            </template>
+            <template v-else>
+              <li
+                v-for="option in videoOptions" :key="option.id"
+                bg="hover:$bew-fill-2" p="x-4 y-2" rounded="$bew-radius-half" cursor-pointer
+                @click="handleMoreCommand(option.id)"
+              >
+                {{ option.name }}
+              </li>
+            </template>
+          </ul>
+        </div>
+      </div>
+    </Transition>
+
+    <!-- mask -->
+    <div
+      v-if="showContextMenu"
+      pos="fixed top-0 left-0" w-full h-full
+      @click="handleClose"
+    />
+
+    <DislikeDialog
+      v-model="showDislikeDialog"
+      :video="video"
+      @close="handleClose"
+      @removed="handleRemoved"
+    />
+  </div>
+</template>
diff --git a/src/components/VideoCard/VideoCardContextMenu/components/DislikeDialog.vue b/src/components/VideoCard/VideoCardContextMenu/components/DislikeDialog.vue
new file mode 100644
index 00000000..afeb027d
--- /dev/null
+++ b/src/components/VideoCard/VideoCardContextMenu/components/DislikeDialog.vue
@@ -0,0 +1,143 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue'
+import { onKeyStroke } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+import { useToast } from 'vue-toastification'
+
+import type { Video } from '~/components/VideoCard/VideoCard.vue'
+import { useApiClient } from '~/composables/api'
+import { accessKey } from '~/logic'
+import { Type as ThreePointV2Type } from '~/models/video/appForYou'
+import { getTvSign, TVAppKey } from '~/utils/authProvider'
+
+const props = defineProps<{
+  modelValue: boolean
+  video: Video
+}>()
+
+const emit = defineEmits<{
+  (event: 'removed', selectedOpt: { dislikeReasonId: number }): void
+  (event: 'close'): void
+}>()
+
+const showDislikeDialog = defineModel<boolean>()
+
+const toast = useToast()
+const { t } = useI18n()
+const api = useApiClient()
+
+const loadingDislikeDialog = ref<boolean>(false)
+const selectedDislikeReason = ref<number>(1)
+
+function closeDislikeDialog() {
+  showDislikeDialog.value = false
+  emit('close')
+}
+
+function handleAppDislike() {
+  if (!accessKey.value) {
+    toast.warning(t('auth.auth_access_key_first'))
+    return
+  }
+
+  loadingDislikeDialog.value = true
+  const params = {
+    access_key: accessKey.value,
+    goto: props.video?.goto,
+    id: props.video?.id,
+    // https://github.com/magicdawn/bilibili-app-recommend/blob/cb51f75f415f48235ce048537f2013122c16b56b/src/components/VideoCard/card.service.ts#L115
+    idx: (Date.now() / 1000).toFixed(0),
+    reason_id: selectedDislikeReason.value,
+    build: 74800100,
+    device: 'pad',
+    mobi_app: 'iphone',
+    appkey: TVAppKey.appkey,
+  }
+
+  api.video.dislikeVideo({
+    ...params,
+    sign: getTvSign(params),
+  })
+    .then((res) => {
+      if (res.code === 0) {
+        emit('removed', { dislikeReasonId: selectedDislikeReason.value })
+      }
+      else {
+        toast.error(res.message)
+      }
+    })
+    .finally(() => {
+      loadingDislikeDialog.value = false
+    })
+}
+
+onKeyStroke((e: KeyboardEvent) => {
+  if (showDislikeDialog.value) {
+    const dislikeReasons = props.video?.threePointV2?.find(option => option.type === ThreePointV2Type.Dislike)?.reasons || []
+
+    if (e.key >= '0' && e.key <= '9') {
+      e.preventDefault()
+      dislikeReasons.forEach((reason) => {
+        if (dislikeReasons[Number(e.key) - 1] && reason.id === dislikeReasons[Number(e.key) - 1].id)
+          selectedDislikeReason.value = reason.id
+      })
+    }
+    else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      const currentIndex = dislikeReasons.findIndex(reason => selectedDislikeReason.value === reason.id)
+      if (currentIndex > 0)
+        selectedDislikeReason.value = dislikeReasons[currentIndex - 1].id
+    }
+    else if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      const currentIndex = dislikeReasons.findIndex(reason => selectedDislikeReason.value === reason.id)
+      if (currentIndex < dislikeReasons.length - 1)
+        selectedDislikeReason.value = dislikeReasons[currentIndex + 1].id
+    }
+  }
+})
+</script>
+
+<template>
+  <Dialog
+    v-if="showDislikeDialog"
+    :title="$t('home.tell_us_why')"
+    width="420px"
+    append-to-bewly-body
+    :loading="loadingDislikeDialog"
+    @close="closeDislikeDialog"
+    @confirm="handleAppDislike"
+  >
+    <ul flex="~ col gap-2">
+      <li
+        v-for="(reason, index) in video?.threePointV2?.find(option => option.type === ThreePointV2Type.Dislike)?.reasons"
+        :key="reason.id"
+        :class="{ 'activated-dislike-reason': selectedDislikeReason === reason.id }"
+        p="x-6 y-4" rounded="$bew-radius" cursor-pointer bg="$bew-fill-1 hover:$bew-fill-2"
+        flex="~ gap-2 items-center justify-between"
+        @click="selectedDislikeReason = reason.id"
+      >
+        <div flex="~ gap-2">
+          <div
+            bg="$bew-theme-color" color-white w-20px h-20px rounded-10
+            flex="~ justify-center items-center"
+          >
+            {{ index + 1 }}
+          </div>
+          {{ reason.name }}
+        </div>
+        <Icon
+          v-if="selectedDislikeReason === reason.id" icon="line-md:confirm"
+          w-18px h-18px
+        />
+      </li>
+    </ul>
+    <p text="$bew-text-3 sm" mt-4 v-html="$t('home.not_interested_desc')" />
+  </Dialog>
+</template>
+
+<style lang="scss" scoped>
+.activated-dislike-reason {
+  --uno: "bg-$bew-theme-color-20 color-$bew-theme-color";
+}
+</style>
diff --git a/src/contentScripts/views/Home/components/ForYou.vue b/src/contentScripts/views/Home/components/ForYou.vue
index 62a90c82..d8e47502 100644
--- a/src/contentScripts/views/Home/components/ForYou.vue
+++ b/src/contentScripts/views/Home/components/ForYou.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
-import { Icon } from '@iconify/vue'
 import { onKeyStroke } from '@vueuse/core'
 import type { Ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useToast } from 'vue-toastification'
 
 import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
@@ -11,10 +8,10 @@ import { FilterType, useFilter } from '~/composables/useFilter'
 import { LanguageType } from '~/enums/appEnums'
 import type { GridLayout } from '~/logic'
 import { accessKey, settings } from '~/logic'
-import type { AppForYouResult, Item as AppVideoItem, ThreePointV2 } from '~/models/video/appForYou'
+import type { AppForYouResult, Item as AppVideoItem } from '~/models/video/appForYou'
 import { Type as ThreePointV2Type } from '~/models/video/appForYou'
 import type { forYouResult, Item as VideoItem } from '~/models/video/forYou'
-import { getTvSign, TVAppKey } from '~/utils/authProvider'
+import { TVAppKey } from '~/utils/authProvider'
 import { isVerticalVideo } from '~/utils/uriParse'
 
 const props = defineProps<{
@@ -37,8 +34,6 @@ const appFilterFunc = useFilter(
   [['uri'], ['player_args', 'duration'], ['cover_left_text_1'], ['title'], ['mask', 'avatar', 'text'], ['mask', 'avatar', 'up_id']],
 )
 
-const { t } = useI18n()
-
 // https://github.com/starknt/BewlyBewly/blob/fad999c2e482095dc3840bb291af53d15ff44130/src/contentScripts/views/Home/components/ForYou.vue#L16
 interface VideoElement {
   uniqueId: string
@@ -58,7 +53,6 @@ const gridValue = computed((): string => {
   return '~ cols-1 gap-4'
 })
 
-const toast = useToast()
 const api = useApiClient()
 const videoList = ref<VideoElement[]>([])
 const appVideoList = ref<AppVideoElement[]>([])
@@ -67,24 +61,11 @@ const needToLoginFirst = ref<boolean>(false)
 const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
 const refreshIdx = ref<number>(1)
 const noMoreContent = ref<boolean>(false)
-const { handleReachBottom, handlePageRefresh, scrollbarRef, haveScrollbar } = useBewlyApp()
-const showVideoOptions = ref<boolean>(false)
-const appVideoOptions = ref<ThreePointV2[] | undefined>([])
-const videoOptions = reactive<{ id: number, name: string }[]>([
-  { id: 1, name: '不感兴趣' },
-  { id: 2, name: '不想看此UP主' },
-])
-const videoOptionsPosition = reactive<{ top: string, left: string }>({ top: '0', left: '0' })
-const activatedAppVideoIdx = ref<number>(0)
+const { handleReachBottom, handlePageRefresh, haveScrollbar } = useBewlyApp()
 const activatedAppVideo = ref<AppVideoItem | null>()
-const activatedVideoId = ref<number>(0)
-const activatedVideo = ref<VideoItem | null>()
 const videoCardRef = ref(null)
-const dislikedVideoUniqueKeys = ref<string[]>([])
-const dislikedAppVideoUniqueKeys = ref<string[]>([])
 const showDislikeDialog = ref<boolean>(false)
 const selectedDislikeReason = ref<number>(1)
-const loadingDislikeDialog = ref<boolean>(false)
 const PAGE_SIZE = 30
 
 onKeyStroke((e: KeyboardEvent) => {
@@ -333,153 +314,6 @@ async function getAppRecommendVideos() {
   }
 }
 
-function handleMoreClick(e: MouseEvent, data: VideoItem) {
-  if (activatedVideo.value && activatedVideoId.value === data.id) {
-    closeVideoOptions()
-    return
-  }
-
-  showVideoOptions.value = true
-  activatedVideoId.value = data.id
-  activatedVideo.value = data
-  const osInstance = scrollbarRef.value?.osInstance()
-  const scrollTop = osInstance.elements().viewport.scrollTop || 0
-  // videoOptions.value = data.three_point_v2
-  videoOptionsPosition.top = `${e.clientY + scrollTop}px`
-  videoOptionsPosition.left = `${e.clientX}px`
-}
-
-function handleAppMoreClick(e: MouseEvent, data: AppVideoItem) {
-  if (activatedAppVideo.value && activatedAppVideoIdx.value === data.idx) {
-    closeAppVideoOptions()
-    return
-  }
-
-  showVideoOptions.value = true
-  activatedAppVideoIdx.value = data.idx
-  activatedAppVideo.value = data
-  const osInstance = scrollbarRef.value?.osInstance()
-  const scrollTop = osInstance.elements().viewport.scrollTop || 0
-  appVideoOptions.value = data.three_point_v2
-  videoOptionsPosition.top = `${e.clientY + scrollTop}px`
-  videoOptionsPosition.left = `${e.clientX}px`
-}
-
-function handleMoreCommand(_command: number) {
-  closeVideoOptions()
-  activatedVideo.value && dislikedVideoUniqueKeys.value.push(getVideoUniqueKey(activatedVideo.value))
-}
-
-function handleAppMoreCommand(command: ThreePointV2Type) {
-  closeAppVideoOptions()
-
-  switch (command) {
-    case ThreePointV2Type.Feedback:
-      break
-    case ThreePointV2Type.Dislike:
-      openAppDislikeDialog()
-      break
-  }
-}
-
-function closeVideoOptions() {
-  showVideoOptions.value = false
-  activatedVideoId.value = 0
-}
-
-function closeAppVideoOptions() {
-  showVideoOptions.value = false
-  activatedVideoId.value = 0
-  activatedAppVideoIdx.value = 0
-}
-
-function openAppDislikeDialog() {
-  selectedDislikeReason.value = 1
-  showDislikeDialog.value = true
-}
-
-function closeDislikeDialog() {
-  showDislikeDialog.value = false
-}
-
-function handleAppDislike() {
-  if (!accessKey.value) {
-    toast.warning(t('auth.auth_access_key_first'))
-    return
-  }
-
-  loadingDislikeDialog.value = true
-  const params = {
-    access_key: accessKey.value,
-    goto: activatedAppVideo.value?.goto,
-    id: Number(activatedAppVideo.value?.param),
-    // https://github.com/magicdawn/bilibili-app-recommend/blob/cb51f75f415f48235ce048537f2013122c16b56b/src/components/VideoCard/card.service.ts#L115
-    idx: (Date.now() / 1000).toFixed(0),
-    reason_id: selectedDislikeReason.value,
-    build: 74800100,
-    device: 'pad',
-    mobi_app: 'iphone',
-    appkey: TVAppKey.appkey,
-  }
-
-  api.video.dislikeVideo({
-    ...params,
-    sign: getTvSign(params),
-  })
-    .then((res) => {
-      if (res.code === 0)
-        activatedAppVideo.value && dislikedAppVideoUniqueKeys.value.push(getAppVideoUniqueKey(activatedAppVideo.value))
-      else
-        toast.error(res.message)
-    })
-    .finally(() => {
-      loadingDislikeDialog.value = false
-    })
-}
-
-function handleUndoDislike(_video: VideoItem) {
-  dislikedVideoUniqueKeys.value = dislikedVideoUniqueKeys.value.filter(currentKey =>
-    currentKey !== (activatedVideo.value ? getVideoUniqueKey(activatedVideo.value) : ''),
-  )
-}
-
-function handleAppUndoDislike(video: AppVideoItem) {
-  const params = {
-    access_key: accessKey.value,
-    goto: video.goto,
-    id: Number(video.param),
-    // https://github.com/magicdawn/bilibili-app-recommend/blob/cb51f75f415f48235ce048537f2013122c16b56b/src/components/VideoCard/card.service.ts#L115
-    idx: Number((Date.now() / 1000).toFixed(0)),
-    reason_id: selectedDislikeReason.value, // 1 means dislike, e.g. {"id": 1, "name": "不感兴趣","toast": "将减少相似内容推荐"}
-    build: 74800100,
-    device: 'pad',
-    mobi_app: 'iphone',
-    appkey: TVAppKey.appkey,
-  }
-
-  api.video.undoDislikeVideo({
-    ...params,
-    sign: getTvSign(params),
-  }).then((res) => {
-    if (res.code === 0) {
-      dislikedAppVideoUniqueKeys.value = dislikedAppVideoUniqueKeys.value.filter(currentKey =>
-        currentKey !== (activatedAppVideo.value ? getAppVideoUniqueKey(activatedAppVideo.value) : ''),
-      )
-    }
-    else {
-      toast.error(res.message)
-    }
-  })
-}
-
-function getVideoUniqueKey(video: VideoItem): string {
-  return video.id + (video.bvid || video.uri || '')
-}
-
-function getAppVideoUniqueKey(video: AppVideoItem) {
-  return video.idx + (video.bvid || video.uri || '')
-}
-
 function jumpToLoginPage() {
   location.href = 'https://passport.bilibili.com/login'
 }
@@ -494,82 +328,6 @@ defineExpose({ initData })
     <div hidden grid="~ cols-1 xl:cols-2 gap-4" />
     <div hidden grid="~ cols-1 gap-4" />
 
-    <!-- more popup -->
-    <div v-show="showVideoOptions">
-      <div
-        pos="fixed top-0 left-0" w-full h-full z-1
-        @click="closeAppVideoOptions"
-      />
-      <div
-        style="backdrop-filter: var(--bew-filter-glass-1);"
-        :style="{ transform: `translate(${videoOptionsPosition.left}, ${videoOptionsPosition.top})` }"
-        p-2 bg="$bew-elevated" rounded="$bew-radius" pos="absolute top-0 left-0"
-        w-150px m="t-4 l-[calc(-150px+1rem)]"
-        shadow="$bew-shadow-1" z-10
-      >
-        <ul flex="~ col gap-1">
-          <template v-if="settings.recommendationMode === 'app'">
-            <template v-for="option in appVideoOptions" :key="option.type">
-              <li
-                v-if="option.type !== ThreePointV2Type.WatchLater && option.type !== ThreePointV2Type.Feedback"
-                bg="hover:$bew-fill-2" p="x-4 y-2" rounded="$bew-radius-half" cursor-pointer
-                @click="handleAppMoreCommand(option.type)"
-              >
-                <span v-if="option.type === ThreePointV2Type.Dislike">{{ $t('home.not_interested') }}</span>
-                <span v-else>{{ option.title }}</span>
-              </li>
-            </template>
-          </template>
-          <template v-else>
-            <li
-              v-for="option in videoOptions" :key="option.id"
-              bg="hover:$bew-fill-2" p="x-4 y-2" rounded="$bew-radius-half" cursor-pointer
-              @click="handleMoreCommand(option.id)"
-            >
-              {{ option.name }}
-            </li>
-          </template>
-        </ul>
-      </div>
-    </div>
-
-    <!-- dislike dialog -->
-    <Dialog
-      v-if="showDislikeDialog"
-      :title="$t('home.tell_us_why')"
-      width="420px"
-      append-to-bewly-body
-      :loading="loadingDislikeDialog"
-      @close="closeDislikeDialog"
-      @confirm="handleAppDislike"
-    >
-      <ul flex="~ col gap-2">
-        <li
-          v-for="(reason, index) in activatedAppVideo?.three_point_v2?.find(option => option.type === ThreePointV2Type.Dislike)?.reasons"
-          :key="reason.id"
-          :class="{ 'activated-dislike-reason': selectedDislikeReason === reason.id }"
-          p="x-6 y-4" rounded="$bew-radius" cursor-pointer bg="$bew-fill-1 hover:$bew-fill-2"
-          flex="~ gap-2 items-center justify-between"
-          @click="selectedDislikeReason = reason.id"
-        >
-          <div flex="~ gap-2">
-            <div
-              bg="$bew-theme-color" color-white w-20px h-20px rounded-10
-              flex="~ justify-center items-center"
-            >
-              {{ index + 1 }}
-            </div>
-            {{ reason.name }}
-          </div>
-          <Icon
-            v-if="selectedDislikeReason === reason.id" icon="line-md:confirm"
-            w-18px h-18px
-          />
-        </li>
-      </ul>
-      <p text="$bew-text-3 sm" mt-4 v-html="$t('home.not_interested_desc')" />
-    </Dialog>
-
     <Empty v-if="needToLoginFirst" mt-6 :description="$t('common.please_log_in_first')">
       <Button type="primary" @click="jumpToLoginPage()">
         {{ $t('common.login') }}
@@ -605,10 +363,6 @@ defineExpose({ initData })
           show-preview
           :horizontal="gridLayout !== 'adaptive'"
           more-btn
-          :more-btn-active="video.item && video.item.id === activatedVideoId"
-          :removed="video.item && dislikedVideoUniqueKeys.includes(getVideoUniqueKey(video.item))"
-          @more-click="(e: MouseEvent) => handleMoreClick(e, video.item!)"
-          @undo="handleUndoDislike(video.item!)"
         />
       </template>
       <template v-else>
@@ -617,6 +371,7 @@ defineExpose({ initData })
           :key="video.uniqueId"
           ref="videoCardRef"
           :skeleton="!video.item"
+          :is-app="true"
           :video="video.item ? {
             id: video.item.args.aid ?? 0,
             durationStr: video.item.cover_right_text,
@@ -631,16 +386,14 @@ defineExpose({ initData })
             viewStr: video.item.cover_left_text_1,
             danmakuStr: video.item.cover_left_text_2,
             cid: video.item?.player_args?.cid,
+            goto: video.item?.goto,
             url: video.item?.goto === 'bangumi' ? video.item.uri : '',
             type: video.item.card_goto === 'bangumi' ? 'bangumi' : isVerticalVideo(video.item.uri!) ? 'vertical' : 'horizontal',
+            threePointV2: video.item?.three_point_v2,
           } : undefined"
           show-preview
           :horizontal="gridLayout !== 'adaptive'"
           more-btn
-          :more-btn-active="video.item && video.item.idx === activatedAppVideoIdx"
-          :removed="video.item && dislikedAppVideoUniqueKeys.includes(getAppVideoUniqueKey(video.item))"
-          @more-click="(e: MouseEvent) => handleAppMoreClick(e, video.item!)"
-          @undo="handleAppUndoDislike(video.item!)"
         />
         <!-- :more-options="video.three_point_v2" -->
       </template>
@@ -653,7 +406,4 @@ defineExpose({ initData })
 </template>
 
 <style lang="scss" scoped>
-.activated-dislike-reason {
-  --uno: "bg-$bew-theme-color-20 color-$bew-theme-color";
-}
 </style>