From 37c63b3b7c594904c1aca4e1d63e5840e9c3f7af Mon Sep 17 00:00:00 2001 From: hakadao Date: Tue, 23 Apr 2024 00:34:44 +0800 Subject: [PATCH] feat: implement a fake not interested feature in web recommend video card --- .../views/Home/components/ForYou.vue | 124 +++++++++++++----- 1 file changed, 91 insertions(+), 33 deletions(-) diff --git a/src/contentScripts/views/Home/components/ForYou.vue b/src/contentScripts/views/Home/components/ForYou.vue index 1c5e660a..b9f75003 100644 --- a/src/contentScripts/views/Home/components/ForYou.vue +++ b/src/contentScripts/views/Home/components/ForYou.vue @@ -39,19 +39,26 @@ const refreshIdx = ref(1) const noMoreContent = ref(false) const { handleReachBottom, handlePageRefresh, scrollbarRef } = useBewlyApp() const showVideoOptions = ref(false) -const videoOptions = ref([]) +const appVideoOptions = ref([]) +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 activatedVideoIdx = ref(0) -const activatedVideo = ref() +const activatedAppVideoIdx = ref(0) +const activatedAppVideo = ref() +const activatedVideoId = ref(0) +const activatedVideo = ref() const videoCardRef = ref(null) const dislikedVideoUniqueKeys = ref([]) +const dislikedAppVideoUniqueKeys = ref([]) const showDislikeDialog = ref(false) const selectedDislikeReason = ref(1) const loadingDislikeDialog = ref(false) onKeyStroke((e: KeyboardEvent) => { if (showDislikeDialog.value) { - const dislikeReasons = activatedVideo.value?.three_point_v2?.find(option => option.type === ThreePointV2Type.Dislike)?.reasons || [] + const dislikeReasons = activatedAppVideo.value?.three_point_v2?.find(option => option.type === ThreePointV2Type.Dislike)?.reasons || [] if (e.key >= '0' && e.key <= '9') { e.preventDefault() @@ -209,40 +216,66 @@ async function getAppRecommendVideos() { } } -function handleMoreClick(e: MouseEvent, data: AppVideoItem) { - if (activatedVideo.value && activatedVideoIdx.value === data.idx) { +function handleMoreClick(e: MouseEvent, data: VideoItem) { + if (activatedVideo.value && activatedVideoId.value === data.id) { closeVideoOptions() return } showVideoOptions.value = true - activatedVideoIdx.value = data.idx + 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 + // videoOptions.value = data.three_point_v2 videoOptionsPosition.top = `${e.clientY + scrollTop}px` videoOptionsPosition.left = `${e.clientX}px` } -function handleMoreCommand(command: ThreePointV2Type) { +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: - openDislikeDialog() + openAppDislikeDialog() break } } function closeVideoOptions() { showVideoOptions.value = false - activatedVideoIdx.value = 0 + activatedVideoId.value = 0 } -function openDislikeDialog() { +function closeAppVideoOptions() { + showVideoOptions.value = false + activatedAppVideoIdx.value = 0 +} + +function openAppDislikeDialog() { selectedDislikeReason.value = 1 showDislikeDialog.value = true } @@ -251,12 +284,12 @@ function closeDislikeDialog() { showDislikeDialog.value = false } -function handleDislike() { +function handleAppDislike() { loadingDislikeDialog.value = true const params = { access_key: accessKey.value, - goto: activatedVideo.value?.goto, - id: activatedVideo.value?.param, + goto: activatedAppVideo.value?.goto, + id: 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, @@ -273,7 +306,7 @@ function handleDislike() { }) .then((res) => { if (res.code === 0) - activatedVideo.value && dislikedVideoUniqueKeys.value.push(getVideoUniqueKey(activatedVideo.value)) + activatedAppVideo.value && dislikedAppVideoUniqueKeys.value.push(getAppVideoUniqueKey(activatedAppVideo.value)) else toast.error(res.message) }) @@ -282,7 +315,13 @@ function handleDislike() { }) } -function handleUndoDislike(video: AppVideoItem) { +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, @@ -302,8 +341,8 @@ function handleUndoDislike(video: AppVideoItem) { sign: getTvSign(params), }).then((res) => { if (res.code === 0) { - dislikedVideoUniqueKeys.value = dislikedVideoUniqueKeys.value.filter(currentKey => - currentKey !== (activatedVideo.value ? getVideoUniqueKey(activatedVideo.value) : ''), + dislikedAppVideoUniqueKeys.value = dislikedAppVideoUniqueKeys.value.filter(currentKey => + currentKey !== (activatedAppVideo.value ? getAppVideoUniqueKey(activatedAppVideo.value) : ''), ) } else { @@ -312,7 +351,11 @@ function handleUndoDislike(video: AppVideoItem) { }) } -function getVideoUniqueKey(video: AppVideoItem) { +function getVideoUniqueKey(video: VideoItem) { + return video.id + (video.bvid || video.uri || '') +} + +function getAppVideoUniqueKey(video: AppVideoItem) { return video.idx + (video.bvid || video.uri || '') } @@ -334,7 +377,7 @@ defineExpose({ initData })
    -