WIP: file viewer

apps/mobile/app/[site_id]/(tabs)/activity/_layout.tsx

@@ -1,6 +1,7 @@
 import ShareButton from '@components/common/ShareButton';
+import { Button } from '@components/nativewindui/Button';
 import { useColorScheme } from '@hooks/useColorScheme';
-import { Stack } from 'expo-router';
+import { router, Stack } from 'expo-router';
 
 const ActivityLayout = () => {
 
@@ -15,7 +16,10 @@ const ActivityLayout = () => {
                 options={{
                     title: 'Activity',
                     headerLargeTitle: true,
-                    headerRight: () => <ShareButton uri='https://raven-dev.frappe.cloud/private/files/2013_mustang.jpg' />
+                    headerRight: () => <Button onPress={() => router.push({
+                        pathname: '/file-viewer',
+                        params: { uri: 'https://raven-dev.frappe.cloud/private/files/2013_mustang.jpg' },
+                    })} />
                 }} />
         </Stack>
     )

apps/mobile/app/file-viewer.tsx

@@ -1,16 +1,14 @@
 import ShareButton from "@components/common/ShareButton"
 import VideoPlayer from "@components/features/video/VideoPlayer"
+import useFileURL from "@hooks/useFileURL"
 import { getFileExtension, isVideoFile } from "@raven/lib/utils/operations"
 import { Stack, useLocalSearchParams } from "expo-router"
 import WebView from "react-native-webview"
+import { WebViewSourceUri } from "react-native-webview/lib/WebViewTypes"
 
 const FileViewer = () => {
 
-  const { source } = useLocalSearchParams()
-
-  const parsedSource = JSON.parse(source as string)
-
-  const uri = parsedSource?.uri
+  const { uri } = useLocalSearchParams() as { uri: string }
 
   const fileExtension = getFileExtension(uri)
 
@@ -22,18 +20,26 @@ const FileViewer = () => {
       <Stack.Screen options={{
         title: 'Raven',
         headerTitle: `${uri?.split('/').pop()}`,
-        headerRight: () => <ShareButton uri="https://raven-dev.frappe.cloud/private/files/2013_mustang.jpg" />
+        headerRight: () => <ShareButton uri={uri} />
       }} />
       {isVideo ?
-        <VideoPlayer source={parsedSource} />
+        <VideoPlayer uri={uri} />
         :
-        <WebView
-          source={parsedSource}
-          style={{ flex: 1 }}
-        />
+        <FileView uri={uri} />
       }
     </>
   )
 }
 
+const FileView = ({ uri }: { uri: string }) => {
+  const source = useFileURL(uri)
+
+  return (
+    <WebView
+      source={source as WebViewSourceUri}
+      style={{ flex: 1 }}
+    />
+  )
+}
+
 export default FileViewer

apps/mobile/components/features/video/VideoPlayer.tsx

@@ -1,8 +1,11 @@
-import { useVideoPlayer, VideoSource, VideoView } from 'expo-video'
+import useFileURL from '@hooks/useFileURL'
+import { useVideoPlayer, VideoView } from 'expo-video'
 
-const VideoPlayer = ({ source }: { source: VideoSource }) => {
+const VideoPlayer = ({ uri }: { uri: string }) => {
 
-    const player = useVideoPlayer(source, player => {
+    const source = useFileURL(uri)
+
+    const player = useVideoPlayer(source ?? {}, player => {
         player.loop = true
         player.play()
     })