From 893dbd1410a9cf7c8281b1c232193487ad28177d Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 8 Oct 2024 02:13:38 +0800
Subject: [PATCH] feat: enhance video card context menu

---
 src/components/PipWindow.vue                  | 170 ++++++++++++++++++
 src/components/VideoCard/VideoCard.vue        |  11 +-
 .../VideoCardContextMenu.vue                  |  77 +++++++-
 src/contentScripts/views/App.vue              |   2 +-
 4 files changed, 251 insertions(+), 9 deletions(-)
 create mode 100644 src/components/PipWindow.vue

diff --git a/src/components/PipWindow.vue b/src/components/PipWindow.vue
new file mode 100644
index 00000000..857659c3
--- /dev/null
+++ b/src/components/PipWindow.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+// import { onKeyStroke } from '@vueuse/core'
+
+import { useDark } from '~/composables/useDark'
+
+const props = defineProps<{
+  url: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const pipWindowRef = ref<HTMLElement | null>(null)
+const pipWindowEl = ref<any | null>(null)
+const iframeRef = ref<HTMLIFrameElement | null>(null)
+const currentUrl = ref<string>(props.url)
+const { isDark } = useDark()
+
+onMounted(() => {
+  openPipWindow()
+})
+
+async function openPipWindow() {
+  // https://developer.chrome.com/docs/web-platform/document-picture-in-picture
+  if ('documentPictureInPicture' in window) {
+    // The Document Picture-in-Picture API is supported.
+    pipWindowEl.value = await (window as any).documentPictureInPicture.requestWindow({
+      disallowReturnToOpener: true,
+    })
+    pipWindowEl.value.document.body.style.padding = '0'
+    pipWindowEl.value.document.body.style.margin = '0'
+
+    if (isDark.value) {
+      // 爲 documentElement 添加主題色防止關閉時顏色白色切換
+      pipWindowEl.value.document.documentElement.style.background = 'var(--bew-bg)'
+      pipWindowEl.value.document.documentElement.classList.add('dark')
+    }
+
+    pipWindowEl.value.document.body.append(pipWindowRef.value)
+
+    pipWindowEl.value.addEventListener('pagehide', () => {
+      handleClose()
+    })
+  }
+  else {
+    const width = window.innerWidth * 0.8
+    const height = window.innerHeight * 0.8
+    const left = (screen.width / 2) - (width / 2)
+    const top = (screen.height / 2) - (height / 2)
+    window.open(currentUrl.value, '', `width=${width}px,height=${height}px,left=${left}px,top=${top}px,toolbar=no,location=no,directories=no,menubar=no,scrollbars=yes,resizable=yes,status=no`)
+    handleClose()
+  }
+}
+
+function handleOpenInNewTab() {
+  window.open(currentUrl.value, '_blank')
+  handleClose()
+}
+
+async function handleClose() {
+  await releaseIframeResources()
+  await nextTick()
+  if (pipWindowEl.value)
+    pipWindowEl.value.close()
+  await nextTick()
+  emit('close')
+}
+
+async function releaseIframeResources() {
+  // Clear iframe content
+  currentUrl.value = 'about:blank'
+  iframeRef.value?.contentWindow?.document.write('')
+  await nextTick()
+  iframeRef.value?.contentWindow?.close()
+
+  // Remove iframe from the DOM
+  iframeRef.value?.parentNode?.removeChild(iframeRef.value)
+  await nextTick()
+
+  // Nullify the reference
+  iframeRef.value = null
+}
+
+// TODO: figure out why the `esc` key doesn't work in here
+
+const isEscPressed = ref<boolean>(false)
+// const escPressedTimer = ref<NodeJS.Timeout | null>(null)
+
+// nextTick(() => {
+//   onKeyStroke('Escape', (e: KeyboardEvent) => {
+//     e.preventDefault()
+//     if (isEscPressed.value) {
+//       handleClose()
+//     }
+//     else {
+//       isEscPressed.value = true
+//       if (escPressedTimer.value) {
+//         clearTimeout(escPressedTimer.value)
+//       }
+//       escPressedTimer.value = setTimeout(() => {
+//         isEscPressed.value = false
+//       }, 1300)
+//     }
+//   }, { target: iframeRef.value?.contentWindow })
+// })
+</script>
+
+<template>
+  <div ref="pipWindowRef">
+    <div pos="absolute top-0 left-0" w-full h-full>
+      <div
+        pos="relative top-0" z-1 flex="~ items-center justify-end gap-2"
+        w-full h="$bew-top-bar-height"
+        pointer-events-none
+      >
+        <Button
+          style="
+              --b-button-color: var(--bew-elevated-solid);
+              --b-button-color-hover: var(--bew-elevated-solid-hover);
+            "
+          pointer-events-auto
+          @click="handleOpenInNewTab"
+        >
+          <template #left>
+            <i i-mingcute:external-link-line />
+          </template>
+          {{ $t('iframe_drawer.open_in_new_tab') }}
+          <!-- <div flex="~">
+              <kbd>Ctrl</kbd><kbd>Alt</kbd><kbd>T</kbd>
+            </div> -->
+        </Button>
+        <Button
+          v-if="!isEscPressed"
+          style="
+            --b-button-color: var(--bew-elevated-solid);
+            --b-button-color-hover: var(--bew-elevated-solid-hover);
+          "
+          pointer-events-auto
+          mr-8
+          @click="handleClose"
+        >
+          <template #left>
+            <i i-mingcute:close-line />
+          </template>
+          {{ $t('iframe_drawer.close') }}
+          <!-- <kbd>Esc</kbd> -->
+        </Button>
+        <Button
+          v-else
+          type="error"
+          @click="handleClose"
+        >
+          <template #left>
+            <i i-mingcute:close-line />
+          </template>
+          {{ $t('iframe_drawer.press_esc_again_to_close') }}
+          <!-- <kbd>Esc</kbd> -->
+        </Button>
+      </div>
+      <iframe
+        ref="iframeRef"
+        :src="url" frameborder="0"
+        w-full h-full p-0
+        pos="absolute top-0 left-0"
+        bg="$bew-bg"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index 48e12167..4aa98fb2 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -66,9 +66,8 @@ export interface Video {
 }
 
 const toast = useToast()
-const { mainAppRef } = useBewlyApp()
+const { mainAppRef, openIframeDrawer } = useBewlyApp()
 const api = useApiClient()
-const { openIframeDrawer } = useBewlyApp()
 const showVideoOptions = ref<boolean>(false)
 const videoOptionsFloatingStyles = ref<CSSProperties>({})
 // Whether the user has marked it as disliked
@@ -250,7 +249,7 @@ function handleUndo() {
   }
 }
 
-function handleRemoved(selectedOpt: { dislikeReasonId: number }) {
+function handleRemoved(selectedOpt?: { dislikeReasonId: number }) {
   selectedDislikeOpt.value = selectedOpt
   removed.value = true
 }
@@ -582,7 +581,11 @@ function handleRemoved(selectedOpt: { dislikeReasonId: number }) {
     >
       <VideoCardContextMenu
         ref="contextMenuRef"
-        :video="video"
+        :video="{
+          ...video,
+          url: videoUrl,
+          authorUrl: authorJumpUrl,
+        }"
         :context-menu-styles="videoOptionsFloatingStyles"
         @close="showVideoOptions = false"
         @removed="handleRemoved"
diff --git a/src/components/VideoCard/VideoCardContextMenu/VideoCardContextMenu.vue b/src/components/VideoCard/VideoCardContextMenu/VideoCardContextMenu.vue
index e2c3cd7e..326edfd3 100644
--- a/src/components/VideoCard/VideoCardContextMenu/VideoCardContextMenu.vue
+++ b/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>
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index aba50492..cd8655c2 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -231,7 +231,7 @@ provide<BewlyAppProvider>('BEWLY_APP', {
     </div>
 
     <IframeDrawer
-      v-if="settings.videoCardLinkOpenMode === 'drawer' && showIframeDrawer"
+      v-if="showIframeDrawer"
       :url="iframeDrawerUrl"
       @close="showIframeDrawer = false"
     />