feat: enhance video card context menu

src/components/VideoCard/VideoCardContextMenu/VideoCardContextMenu.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue'
 
+import { useBewlyApp } from '~/composables/useAppProvider'
 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<{
+const props = defineProps<{
   video: Video
   contextMenuStyles: CSSProperties
 }>()
@@ -21,8 +22,32 @@ const videoOptions = reactive<{ id: number, name: string }[]>([
   { id: 1, name: '不感兴趣' },
   { id: 2, name: '不想看此UP主' },
 ])
+
 const showContextMenu = ref<boolean>(false)
 const showDislikeDialog = ref<boolean>(false)
+const showPipWindow = ref<boolean>(false)
+const { openIframeDrawer } = useBewlyApp()
+
+enum VideoOption {
+  OpenInNewTab,
+  OpenInNewWindow,
+  OpenInDrawer,
+  ViewTheOriginalCover,
+}
+
+const commonOptions = computed((): { command: VideoOption, name: string, icon: string, color?: string }[][] => {
+  return [
+    [
+      { command: VideoOption.OpenInNewTab, name: 'Open in new tab', icon: 'i-solar:square-top-down-bold-duotone' },
+      { command: VideoOption.OpenInNewWindow, name: 'Open in new window', icon: 'i-solar:maximize-square-3-bold-duotone' },
+      { command: VideoOption.OpenInDrawer, name: 'Open in drawer', icon: 'i-solar:archive-up-minimlistic-bold-duotone' },
+    ],
+
+    [
+      { command: VideoOption.ViewTheOriginalCover, name: 'View the original cover', icon: 'i-solar:gallery-minimalistic-bold-duotone' },
+    ],
+  ]
+})
 
 onMounted(() => {
   showContextMenu.value = true
@@ -42,6 +67,27 @@ function handleAppMoreCommand(command: ThreePointV2Type) {
   }
 }
 
+function handleCommonCommand(command: VideoOption) {
+  switch (command) {
+    case VideoOption.OpenInNewTab:
+      window.open(props.video.url, '_blank')
+      handleClose()
+      break
+    case VideoOption.OpenInNewWindow:
+      showPipWindow.value = true
+      break
+    case VideoOption.OpenInDrawer:
+      openIframeDrawer(props.video.url || '')
+      handleClose()
+      break
+
+    case VideoOption.ViewTheOriginalCover:
+      window.open(props.video.cover, '_blank')
+      handleClose()
+      break
+  }
+}
+
 function openAppDislikeDialog() {
   showDislikeDialog.value = true
   showContextMenu.value = false
@@ -49,9 +95,8 @@ function openAppDislikeDialog() {
 
 function handleClose() {
   showContextMenu.value = false
+  showPipWindow.value = false
   emit('close')
-  nextTick(() => {
-  })
 }
 
 function handleRemoved(selectedOpt?: { dislikeReasonId: number }) {
@@ -96,6 +141,20 @@ function handleRemoved(selectedOpt?: { dislikeReasonId: number }) {
                 {{ option.name }}
               </li>
             </template>
+
+            <template v-for="(optionGroup, index) in commonOptions" :key="index">
+              <div class="divider" />
+
+              <li
+                v-for="option in optionGroup"
+                :key="option.command"
+                class="context-menu-item"
+                @click="handleCommonCommand(option.command)"
+              >
+                <i class="item-icon" :class="option.icon" />
+                {{ option.name }}
+              </li>
+            </template>
           </ul>
         </div>
       </div>
@@ -114,6 +173,12 @@ function handleRemoved(selectedOpt?: { dislikeReasonId: number }) {
       @close="handleClose"
       @removed="handleRemoved"
     />
+
+    <PipWindow
+      v-if="showPipWindow"
+      :url="video.url"
+      @close="handleClose"
+    />
   </div>
 </template>
 
@@ -124,6 +189,10 @@ function handleRemoved(selectedOpt?: { dislikeReasonId: number }) {
 }
 
 .item-icon {
-  --uno: "mr-2 inline-block";
+  --uno: "mr-2 inline-block color-$bew-text-color-2";
+}
+
+.divider {
+  --uno: "w-full h-1px my-1 bg-$bew-border-color";
 }
 </style>