[TAS-5490] 🚸 Hide context menu when annotation menu opens

components/AnnotationMenu.vue

@@ -27,6 +27,8 @@
 <script setup lang="ts">
 import { ANNOTATION_COLORS, ANNOTATION_INDICATOR_COLORS_MAP } from '~/constants/annotations'
 
+const { isIOS } = useAppDetection()
+
 const MENU_PADDING = 8
 
 const props = defineProps<{
@@ -45,7 +47,8 @@ const menuEl = useTemplateRef<HTMLDivElement>('menuEl')
 const { width: menuWidth } = useElementSize(menuEl)
 const { width: viewportWidth, height: viewportHeight } = useWindowSize()
 
-const shouldAppearFromBottom = computed(() => props.position.y > viewportHeight.value / 2)
+const isInBottomHalfViewport = computed(() => props.position.y > viewportHeight.value / 2)
+const shouldAppearFromBottom = computed(() => !isIOS.value || isInBottomHalfViewport.value)
 
 const menuStyle = computed(() => {
   const minX = menuWidth.value / 2 + MENU_PADDING * 2

composables/use-app-detection.ts

@@ -1,15 +1,26 @@
-const APP_USER_AGENT_PREFIX = '3ook-com-app'
+// e.g. "3ook-com-app/1.1.0 (iOS 18.0) Build/42"
+const APP_USER_AGENT_REGEX = /^3ook-com-app\/[\d.]+ \((iOS|Android) [\d.]+\)/
 
 export function useAppDetection() {
   const getRouteQuery = useRouteQuery()
 
-  const isAppUserAgent = import.meta.server
-    ? useRequestHeaders(['user-agent'])['user-agent']?.startsWith(APP_USER_AGENT_PREFIX) || false
-    : navigator.userAgent?.startsWith(APP_USER_AGENT_PREFIX) || false
+  const userAgent = import.meta.server
+    ? useRequestHeaders(['user-agent'])['user-agent'] || ''
+    : navigator.userAgent || ''
+
+  const appUAMatches = userAgent.match(APP_USER_AGENT_REGEX)
+  const appOSName = appUAMatches?.[1]
 
   const isApp = computed(() => {
-    return isAppUserAgent || getRouteQuery('app') === '1'
+    return !!appUAMatches || getRouteQuery('app') === '1'
   })
 
-  return { isApp }
+  const isIOS = computed(() => appOSName === 'iOS' || /iPhone|iPad/.test(userAgent))
+  const isAndroid = computed(() => appOSName === 'Android' || /Android/.test(userAgent))
+
+  return {
+    isApp,
+    isIOS,
+    isAndroid,
+  }
 }

pages/reader/epub.vue

@@ -419,6 +419,8 @@ const isMobileTocOpen = computed({
   },
 })
 
+const { isIOS, isAndroid } = useAppDetection()
+
 const isPageLoading = ref(false)
 
 const isAnnotationMenuVisible = ref(false)
@@ -583,6 +585,7 @@ const FONT_SIZE_OPTIONS = [
 ]
 const DEFAULT_FONT_SIZE_INDEX = 8 // Default to 24px
 const COPY_CHAR_LIMIT = 100
+const SELECTION_CHANGE_DEBOUNCE_MS = 300
 const fontSize = useSyncedBookSettings({
   nftClassId: nftClassId.value,
   key: 'fontSize',
@@ -618,6 +621,9 @@ function applyTheme() {
     textCSS.color = bodyCSS.color as string
     textCSS['background-color'] = 'transparent !important'
   }
+  if (isIOS.value || isAndroid.value) {
+    textCSS['-webkit-touch-callout'] = 'none'
+  }
   const anchorCSS: Record<string, string> = {
     color: isDarkMode ? '#9ecfff !important' : '#0066cc',
   }
@@ -647,6 +653,7 @@ let removeSelectAllByHotkeyListener: (() => void) | undefined
 let removeCopyListener: (() => void) | undefined
 let removeMouseUpListener: (() => void) | undefined
 let removeSelectionChangeListener: (() => void) | undefined
+let removeContextMenuListener: (() => void) | undefined
 const renditionElement = useTemplateRef<HTMLDivElement>('reader')
 const renditionViewWindow = ref<Window | undefined>(undefined)
 
@@ -881,9 +888,18 @@ async function loadEPub() {
     }
     const debouncedSelectionChange = useDebounceFn(() => {
       handleTextSelection(view.window)
-    }, 300)
+    }, SELECTION_CHANGE_DEBOUNCE_MS)
     removeSelectionChangeListener = useEventListener(view.window.document, 'selectionchange', debouncedSelectionChange)
 
+    if (removeContextMenuListener) {
+      removeContextMenuListener()
+    }
+    if (isIOS.value || isAndroid.value) {
+      removeContextMenuListener = useEventListener(view.window, 'contextmenu', (event: Event) => {
+        event.preventDefault()
+      })
+    }
+
     renderAnnotations()
   })
 
@@ -1212,6 +1228,38 @@ function removeAnnotationHighlight(cfi: string) {
   renderedHighlights.delete(cfi)
 }
 
+let tempHighlightCfi: string | null = null
+
+function removeTempHighlight() {
+  if (!tempHighlightCfi || !rendition.value) return
+  try {
+    rendition.value.annotations.remove(tempHighlightCfi, 'underline')
+  }
+  catch {
+    // Ignore
+  }
+  tempHighlightCfi = null
+}
+
+function addTempHighlight(cfi: string) {
+  removeTempHighlight()
+  if (!rendition.value) return
+  try {
+    rendition.value.annotations.underline(cfi, {}, undefined, undefined, {
+      'stroke': '#50e3c2',
+      'stroke-width': '3px',
+    })
+    tempHighlightCfi = cfi
+  }
+  catch {
+    // Ignore
+  }
+}
+
+watch(isAnnotationMenuVisible, (visible) => {
+  if (!visible) removeTempHighlight()
+})
+
 function renderAnnotations() {
   if (!rendition.value) return
 
@@ -1241,7 +1289,11 @@ function handleAnnotationClick(annotationId: string) {
   }
 }
 
+let isClearingSelection = false
+
 function handleTextSelection(viewWindow: Window) {
+  if (isClearingSelection) return
+
   const selection = viewWindow.getSelection()
   if (!selection || selection.isCollapsed || !selection.toString().trim()) {
     isAnnotationMenuVisible.value = false
@@ -1293,6 +1345,16 @@ function handleTextSelection(viewWindow: Window) {
       }
     }
 
+    // On iOS, clear selection to dismiss native callout menu and add temp highlight
+    if (isIOS.value) {
+      isClearingSelection = true
+      selection.removeAllRanges()
+      addTempHighlight(cfiRange)
+      setTimeout(() => {
+        isClearingSelection = false
+      }, SELECTION_CHANGE_DEBOUNCE_MS + 100)
+    }
+
     isAnnotationMenuVisible.value = true
   }
   catch (error) {
@@ -1537,6 +1599,7 @@ onBeforeUnmount(() => {
   removeCopyListener?.()
   removeMouseUpListener?.()
   removeSelectionChangeListener?.()
+  removeContextMenuListener?.()
   renderedHighlights.clear()
   renditionViewWindow.value = undefined
   rendition.value?.destroy()