feat: 稍后再看

src/panes/WatchLaterPane/WatchLaterPane.vue

@@ -1,3 +1,33 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useStore } from '../../store.ts'
+import { commands, WatchLaterInfo } from '../../bindings.ts'
+import WatchLaterPanel from './components/WatchLaterPanel.vue'
+
+const store = useStore()
+
+const watchLaterInfo = ref<WatchLaterInfo>()
+
+watch(
+  () => store.userInfo,
+  async () => {
+    if (store.userInfo === undefined) {
+      watchLaterInfo.value = undefined
+      return
+    }
+    const result = await commands.getWatchLaterInfo(1)
+    if (result.status === 'error') {
+      console.error(result.error)
+      return
+    }
+    watchLaterInfo.value = result.data
+  },
+)
+</script>
+
 <template>
-  <div>WatchLaterPane</div>
+  <div v-if="watchLaterInfo !== undefined" class="h-full">
+    <WatchLaterPanel v-model:watch-later-info="watchLaterInfo" />
+  </div>
+  <n-empty v-else class="mt-2" description="请先登录" />
 </template>

src/panes/WatchLaterPane/components/WatchLaterCard.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { MediaInWatchLater } from '../../../bindings.ts'
+import { computed, inject, ref } from 'vue'
+import { navDownloadButtonRefKey } from '../../../injection_keys.ts'
+import { ensureHttps, extractEpId, isElementInViewport, playTaskToQueueAnimation } from '../../../utils.tsx'
+import { PhDownloadSimple, PhGoogleChromeLogo, PhMagnifyingGlass } from '@phosphor-icons/vue'
+import SimpleCheckbox from '../../../components/SimpleCheckbox.vue'
+import { SearchType } from '../../SearchPane/SearchPane.vue'
+
+const props = defineProps<{
+  media: MediaInWatchLater
+  downloadEpisode?: (media: MediaInWatchLater) => Promise<void>
+  checkboxChecked?: (media: MediaInWatchLater) => boolean
+  handleCheckboxClick?: (media: MediaInWatchLater) => void
+  handleContextMenu?: (media: MediaInWatchLater) => void
+  search?: (input: string, searchType: SearchType) => void
+}>()
+
+const navDownloadButtonRef = inject(navDownloadButtonRefKey)
+const rootDivRef = ref<HTMLDivElement>()
+const downloadButtonRef = ref<HTMLDivElement>()
+
+const openInBrowserHref = computed<string>(() => {
+  if (props.media.redirect_url === null) {
+    return `https://www.bilibili.com/video/${props.media.bvid}/`
+  } else {
+    const epId = extractEpId(props.media.redirect_url)
+    return `https://www.bilibili.com/bangumi/play/ep${epId}`
+  }
+})
+
+async function handleDownloadClick() {
+  if (props.downloadEpisode === undefined) {
+    return
+  }
+
+  await props.downloadEpisode(props.media)
+  playDownloadAnimation()
+}
+
+function playDownloadAnimation() {
+  if (rootDivRef.value === undefined) {
+    return
+  }
+
+  const from = downloadButtonRef.value
+  const to = navDownloadButtonRef?.value
+
+  if (from instanceof Element && to !== undefined) {
+    if (isElementInViewport(rootDivRef.value)) {
+      // 只有卡片在视口内才播放动画
+      playTaskToQueueAnimation(from, to)
+    }
+  }
+}
+
+function searchInSearchPane() {
+  if (props.search === undefined) {
+    return
+  }
+
+  if (props.media.redirect_url === null) {
+    props.search(props.media.bvid, 'Normal')
+  } else {
+    const epId = extractEpId(props.media.redirect_url)
+    props.search(`ep${epId}`, 'Bangumi')
+  }
+}
+
+defineExpose({ playDownloadAnimation, media: props.media })
+</script>
+
+<template>
+  <div
+    class="flex flex-col w-200px relative p-3 rounded-lg"
+    @contextmenu="handleContextMenu?.(media)"
+    :title="media.redirect_url !== null ? '下载请点击左下角放大镜按钮' : undefined"
+    ref="rootDivRef">
+    <SimpleCheckbox
+      v-if="media.redirect_url === null && handleCheckboxClick !== undefined && checkboxChecked !== undefined"
+      class="absolute top-6 left-6 z-1 backdrop-blur-2"
+      :checked="checkboxChecked(media)"
+      :on-click="() => handleCheckboxClick?.(media)" />
+    <div v-if="media.redirect_url !== null" class="absolute top-6 right-6 z-1 bg-[#ff6699] text-white px-1 rounded">
+      番剧
+    </div>
+    <img
+      class="w-200px h-125px rounded-lg object-cover lazyload"
+      :data-src="`${ensureHttps(media.pic)}@672w_378h_1c.webp`"
+      :key="media.pic"
+      alt=""
+      draggable="false" />
+
+    <div class="w-full flex flex-col h-45px mt-2">
+      <span class="line-clamp-2" :title="media.title">{{ media.title }}</span>
+    </div>
+
+    <div class="flex items-center whitespace-nowrap text-gray text-12px w-full overflow-hidden">
+      <a
+        class="min-w-0 color-inherit no-underline hover:text-sky-5 mr-1"
+        :href="`https://space.bilibili.com/${media.owner.mid}`"
+        target="_blank"
+        draggable="false">
+        <div class="truncate text-ellipsis" :title="media.owner.name">{{ media.owner.name }}</div>
+      </a>
+      <span class="ml-auto flex-shrink-0" title="发布时间">
+        <n-time unix type="date" :time="media.pubdate" />
+      </span>
+    </div>
+
+    <div class="flex gap-1 items-center">
+      <a
+        :href="openInBrowserHref"
+        target="_blank"
+        draggable="false"
+        title="在浏览器中打开"
+        class="p-1 rounded-lg flex items-center justify-between text-gray-6 hover:bg-sky-5 hover:text-white active:bg-sky-6">
+        <PhGoogleChromeLogo :size="24" />
+      </a>
+
+      <div
+        v-if="search !== undefined"
+        title="在下载器内搜索"
+        class="cursor-pointer p-1 rounded-lg flex items-center justify-between text-gray-6 hover:bg-sky-5 hover:text-white active:bg-sky-6"
+        @click="searchInSearchPane">
+        <PhMagnifyingGlass :size="24" />
+      </div>
+
+      <div
+        v-if="downloadEpisode !== undefined"
+        ref="downloadButtonRef"
+        title="一键下载"
+        class="ml-auto cursor-pointer p-1 rounded-lg flex items-center justify-between text-gray-6 hover:bg-sky-5 hover:text-white active:bg-sky-6"
+        @click="handleDownloadClick">
+        <PhDownloadSimple :size="24" />
+      </div>
+    </div>
+  </div>
+</template>

src/panes/WatchLaterPane/components/WatchLaterPanel.vue

@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { commands, MediaInWatchLater, WatchLaterInfo } from '../../../bindings.ts'
+import { computed, inject, ref, watch } from 'vue'
+import { useEpisodeDropdown, useEpisodeSelection } from '../../../utils.tsx'
+import { SelectionArea } from '@viselect/vue'
+import { searchPaneRefKey } from '../../../injection_keys.ts'
+import WatchLaterCard from './WatchLaterCard.vue'
+
+const watchLaterInfo = defineModel<WatchLaterInfo>('watchLaterInfo', { required: true })
+
+const searchPaneRef = inject(searchPaneRefKey)
+
+const currentPage = ref<number>(1)
+
+const pageCount = computed<number>(() => {
+  if (watchLaterInfo.value === undefined) {
+    return 1
+  }
+  return Math.ceil(watchLaterInfo.value.count / 20)
+})
+
+const watchLaterCardRefs = ref<InstanceType<typeof WatchLaterCard>[]>([])
+const watchLaterCardRefsMap = computed<Map<number, InstanceType<typeof WatchLaterCard>>>(() => {
+  const map = new Map<number, InstanceType<typeof WatchLaterCard>>()
+  watchLaterCardRefs.value.forEach((card) => map.set(card.media.aid, card))
+  return map
+})
+
+const { selectedIds, updateSelectedIds, unselectAll } = useEpisodeSelection()
+const selectionAreaRef = ref<InstanceType<typeof SelectionArea>>()
+const checkedIds = ref<Set<number>>(new Set())
+
+watch(watchLaterInfo, () => {
+  selectedIds.value.clear()
+  checkedIds.value.clear()
+  selectionAreaRef.value?.selection?.clearSelection()
+  selectionAreaRef.value?.$el.scrollTo({ top: 0, behavior: 'instant' })
+})
+
+const { dropdownX, dropdownY, dropdownShowing, dropdownOptions, showDropdown } = useEpisodeDropdown(
+  () => {
+    selectedIds.value.forEach((aid) => checkedIds.value.add(aid))
+    dropdownShowing.value = false
+  },
+  () => {
+    selectedIds.value.forEach((aid) => checkedIds.value.delete(aid))
+    dropdownShowing.value = false
+  },
+  () => {
+    watchLaterInfo.value.list?.forEach((media) => selectedIds.value.add(media.aid))
+    dropdownShowing.value = false
+  },
+)
+
+const { downloadEpisode, checkboxChecked, handleCheckboxClick, handleContextMenu } = useWatchLaterCard(
+  async (media: MediaInWatchLater) => {
+    await downloadNormalEpisode(media.aid)
+  },
+  (media: MediaInWatchLater) => {
+    return checkedIds.value.has(media.aid)
+  },
+  (media: MediaInWatchLater) => {
+    const checked = checkedIds.value.has(media.aid)
+    if (checked) {
+      checkedIds.value.delete(media.aid)
+    } else {
+      checkedIds.value.add(media.aid)
+    }
+  },
+  (media: MediaInWatchLater) => {
+    if (selectedIds.value.has(media.aid)) {
+      return
+    }
+
+    selectedIds.value.clear()
+    selectedIds.value.add(media.aid)
+    const selection = selectionAreaRef.value?.selection
+    if (selection) {
+      selection.clearSelection()
+      selection.select(`[data-key="${media.aid}"]`)
+    }
+  },
+)
+
+async function downloadNormalEpisode(aid: number) {
+  // 获取普通视频信息，用于创建下载任务
+  const getNormalInfoResult = await commands.getNormalInfo({ Aid: aid })
+  if (getNormalInfoResult.status === 'error') {
+    console.error(getNormalInfoResult.error)
+    return
+  }
+  // 创建下载任务
+  await commands.createDownloadTasks({ Normal: { info: getNormalInfoResult.data, aid_cid_pairs: [[aid, null]] } })
+}
+
+async function downloadCheckedEpisodes() {
+  for (const aid of checkedIds.value) {
+    // 创建下载任务
+    await downloadNormalEpisode(aid)
+    // 播放下载动画
+    const card = watchLaterCardRefsMap.value.get(aid)
+    if (card !== undefined) {
+      card.playDownloadAnimation()
+    }
+    await new Promise((resolve) => setTimeout(resolve, 200))
+  }
+}
+
+async function getWatchLaterInfo(page: number) {
+  currentPage.value = page
+  const result = await commands.getWatchLaterInfo(page)
+  if (result.status === 'error') {
+    console.error(result.error)
+    return
+  }
+  watchLaterInfo.value = result.data
+}
+
+function useWatchLaterCard(
+  downloadEpisode: (media: MediaInWatchLater) => Promise<void>,
+  checkboxChecked: (media: MediaInWatchLater) => boolean,
+  handleCheckboxClick: (media: MediaInWatchLater) => void,
+  handleContextMenu: (media: MediaInWatchLater) => void,
+) {
+  return {
+    downloadEpisode,
+    checkboxChecked,
+    handleCheckboxClick,
+    handleContextMenu,
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col h-full select-none overflow-auto">
+    <SelectionArea
+      ref="selectionAreaRef"
+      class="selection-container flex flex-col flex-1 px-2 overflow-auto"
+      :options="{ selectables: '.selectable', features: { deselectOnBlur: true } }"
+      @contextmenu="showDropdown"
+      @move="updateSelectedIds"
+      @start="unselectAll">
+      <div class="animate-pulse text-violet">左键拖动进行框选，右键打开菜单</div>
+      <div class="flex flex-wrap gap-2">
+        <template v-for="media in watchLaterInfo.list" :key="media.aid">
+          <WatchLaterCard
+            v-if="media.redirect_url === null"
+            ref="watchLaterCardRefs"
+            :data-key="media.aid"
+            :class="[
+              'selectable border border-solid border-transparent',
+              selectedIds.has(media.aid) ? 'selected shadow-md' : 'hover:bg-gray-1',
+            ]"
+            :media="media"
+            :download-episode="downloadEpisode"
+            :checkbox-checked="checkboxChecked"
+            :handle-checkbox-click="handleCheckboxClick"
+            :handle-context-menu="handleContextMenu"
+            :search="searchPaneRef?.search" />
+          <WatchLaterCard
+            v-else
+            ref="favCardRefs"
+            class="border border-solid border-transparent hover:border-gray-3"
+            :media="media"
+            :search="searchPaneRef?.search" />
+        </template>
+      </div>
+    </SelectionArea>
+
+    <div class="flex gap-2 m-2 box-border">
+      <n-pagination :page-count="pageCount" :page="currentPage" @update:page="getWatchLaterInfo($event)" />
+      <n-button class="ml-auto" size="small" type="primary" @click="downloadCheckedEpisodes">下载勾选视频</n-button>
+    </div>
+
+    <n-dropdown
+      placement="bottom-start"
+      trigger="manual"
+      :x="dropdownX"
+      :y="dropdownY"
+      :options="dropdownOptions"
+      :show="dropdownShowing"
+      :on-clickoutside="() => (dropdownShowing = false)" />
+  </div>
+</template>
+
+<style scoped>
+.selection-container .selected {
+  @apply bg-[rgb(204,232,255)];
+}
+</style>