feat: use native preview for pdf in mobile webview (#1728)

packages/web/src/javascripts/Components/ChallengeModal/BiometricsPrompt.tsx

@@ -22,7 +22,7 @@ const BiometricsPrompt = ({ application, onValueChange, prompt, buttonRef }: Pro
         fullWidth
         colorStyle={authenticated ? 'success' : 'info'}
         onClick={async () => {
-          const authenticated = await application.mobileDevice.authenticateWithBiometrics()
+          const authenticated = await application.mobileDevice().authenticateWithBiometrics()
           setAuthenticated(authenticated)
           onValueChange(authenticated, prompt)
         }}

packages/web/src/javascripts/Components/FilePreview/FilePreview.tsx

@@ -66,7 +66,7 @@ const FilePreview = ({ file, application }: Props) => {
       <span className="mt-3">Loading file...</span>
     </div>
   ) : downloadedBytes ? (
-    <PreviewComponent file={file} bytes={downloadedBytes} />
+    <PreviewComponent application={application} file={file} bytes={downloadedBytes} />
   ) : (
     <FilePreviewError
       file={file}

packages/web/src/javascripts/Components/FilePreview/PreviewComponent.tsx

@@ -1,16 +1,24 @@
+import { WebApplication } from '@/Application/Application'
+import { getBase64FromBlob } from '@/Utils'
 import { FileItem } from '@standardnotes/snjs'
-import { FunctionComponent, useEffect, useMemo, useRef } from 'react'
+import { FunctionComponent, useCallback, useEffect, useMemo, useRef } from 'react'
+import Button from '../Button/Button'
+import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
+import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 import { createObjectURLWithRef } from './CreateObjectURLWithRef'
 import ImagePreview from './ImagePreview'
-import { PreviewableTextFileTypes } from './isFilePreviewable'
+import { PreviewableTextFileTypes, RequiresNativeFilePreview } from './isFilePreviewable'
 import TextPreview from './TextPreview'
 
 type Props = {
+  application: WebApplication
   file: FileItem
   bytes: Uint8Array
 }
 
-const PreviewComponent: FunctionComponent<Props> = ({ file, bytes }) => {
+const PreviewComponent: FunctionComponent<Props> = ({ application, file, bytes }) => {
+  const { selectedPane } = useResponsiveAppPane()
+
   const objectUrlRef = useRef<string>()
 
   const objectUrl = useMemo(() => {
@@ -28,6 +36,42 @@ const PreviewComponent: FunctionComponent<Props> = ({ file, bytes }) => {
     }
   }, [])
 
+  const isNativeMobileWeb = application.isNativeMobileWeb()
+  const requiresNativePreview = RequiresNativeFilePreview.includes(file.mimeType)
+
+  const openNativeFilePreview = useCallback(async () => {
+    if (!isNativeMobileWeb) {
+      throw new Error('Native file preview cannot be used on non-native platform')
+    }
+
+    const fileBase64 = await getBase64FromBlob(
+      new Blob([bytes], {
+        type: file.mimeType,
+      }),
+    )
+
+    application.mobileDevice().previewFile(fileBase64, file.name)
+  }, [application, bytes, file.mimeType, file.name, isNativeMobileWeb])
+
+  useEffect(() => {
+    const shouldOpenNativePreviewOnLoad =
+      isNativeMobileWeb && selectedPane === AppPaneId.Editor && requiresNativePreview
+    if (shouldOpenNativePreviewOnLoad) {
+      void openNativeFilePreview()
+    }
+  }, [isNativeMobileWeb, openNativeFilePreview, requiresNativePreview, selectedPane])
+
+  if (isNativeMobileWeb && requiresNativePreview) {
+    return (
+      <div className="flex flex-grow flex-col items-center justify-center">
+        <div className="text-base font-bold">Previewing file...</div>
+        <Button className="mt-3" primary onClick={openNativeFilePreview}>
+          Re-open file preview
+        </Button>
+      </div>
+    )
+  }
+
   if (file.mimeType.startsWith('image/')) {
     return <ImagePreview objectUrl={objectUrl} />
   }

packages/web/src/javascripts/Components/FilePreview/isFilePreviewable.ts

@@ -1,5 +1,7 @@
 export const PreviewableTextFileTypes = ['text/plain', 'text/csv', 'application/json']
 
+export const RequiresNativeFilePreview = ['application/pdf']
+
 export const isFileTypePreviewable = (fileType: string) => {
   const isImage = fileType.startsWith('image/')
   const isVideo = fileType.startsWith('video/')

packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx

@@ -18,7 +18,7 @@ const UpgradeNow = ({ application, featuresController }: Props) => {
     }
 
     if (application.isNativeMobileWeb()) {
-      application.mobileDevice.openUrl(window.plansUrl)
+      application.mobileDevice().openUrl(window.plansUrl)
     } else {
       window.location.assign(window.plansUrl)
     }

packages/web/src/javascripts/Components/Preferences/Panes/General/Defaults/CustomNoteTitleFormat.tsx

@@ -51,7 +51,7 @@ const CustomNoteTitleFormat = ({ application }: Props) => {
             onClick={(event) => {
               if (application.isNativeMobileWeb()) {
                 event.preventDefault()
-                application.mobileDevice.openUrl(HelpPageUrl)
+                application.mobileDevice().openUrl(HelpPageUrl)
               }
             }}
           >

packages/web/src/javascripts/Components/PurchaseFlow/PurchaseFlowFunctions.ts

@@ -23,7 +23,7 @@ export const loadPurchaseFlowUrl = async (application: WebApplication): Promise<
     const finalUrl = `${url}${period}${plan}`
 
     if (application.isNativeMobileWeb()) {
-      application.mobileDevice.openUrl(finalUrl)
+      application.mobileDevice().openUrl(finalUrl)
     } else {
       window.location.assign(finalUrl)
     }