From 2fb85590271476a40c3d0d6a9cc4683576ff6074 Mon Sep 17 00:00:00 2001 From: MohamedBassem Date: Mon, 26 Aug 2024 23:54:10 +0300 Subject: feature(mobile): Allow interacting with images in the app. Fixes #352 --- apps/mobile/app.json | 4 ++-- .../components/bookmarks/BookmarkAssetImage.tsx | 17 ++++------------- .../components/bookmarks/ViewBookmarkModal.tsx | 20 +++++++++++++++++--- apps/mobile/lib/hooks.ts | 13 +++++++++++++ apps/mobile/package.json | 1 + pnpm-lock.yaml | 15 +++++++++++++++ 6 files changed, 52 insertions(+), 18 deletions(-) create mode 100644 apps/mobile/lib/hooks.ts diff --git a/apps/mobile/app.json b/apps/mobile/app.json index baf2ca6e..4a877623 100644 --- a/apps/mobile/app.json +++ b/apps/mobile/app.json @@ -30,7 +30,7 @@ "NSAllowsLocalNetworking": true } }, - "buildNumber": "8" + "buildNumber": "9" }, "android": { "adaptiveIcon": { @@ -48,7 +48,7 @@ } }, "package": "app.hoarder.hoardermobile", - "versionCode": 8 + "versionCode": 9 }, "plugins": [ "expo-router", diff --git a/apps/mobile/components/bookmarks/BookmarkAssetImage.tsx b/apps/mobile/components/bookmarks/BookmarkAssetImage.tsx index 95f963f4..8fa88c8b 100644 --- a/apps/mobile/components/bookmarks/BookmarkAssetImage.tsx +++ b/apps/mobile/components/bookmarks/BookmarkAssetImage.tsx @@ -1,5 +1,5 @@ import { Image } from "react-native"; -import useAppSettings from "@/lib/settings"; +import { useAssetUrl } from "@/lib/hooks"; export default function BookmarkAssetImage({ assetId, @@ -8,16 +8,7 @@ export default function BookmarkAssetImage({ assetId: string; className: string; }) { - const { settings } = useAppSettings(); - return ( - - ); + const assetSource = useAssetUrl(assetId); + + return ; } diff --git a/apps/mobile/components/bookmarks/ViewBookmarkModal.tsx b/apps/mobile/components/bookmarks/ViewBookmarkModal.tsx index 318249eb..6bec88af 100644 --- a/apps/mobile/components/bookmarks/ViewBookmarkModal.tsx +++ b/apps/mobile/components/bookmarks/ViewBookmarkModal.tsx @@ -1,5 +1,7 @@ import React, { useState } from "react"; import { Keyboard, Pressable, Text } from "react-native"; +import ImageView from "react-native-image-viewing"; +import { useAssetUrl } from "@/lib/hooks"; import { BottomSheetBackdrop, BottomSheetModal, @@ -122,15 +124,27 @@ function BookmarkTextView({ bookmark }: { bookmark: ZBookmark }) { } function BookmarkAssetView({ bookmark }: { bookmark: ZBookmark }) { + const [imageZoom, setImageZoom] = useState(false); if (bookmark.content.type !== BookmarkTypes.ASSET) { throw new Error("Wrong content type rendered"); } + const assetSource = useAssetUrl(bookmark.content.assetId); return ( - setImageZoom(false)} + doubleTapToZoomEnabled={true} + images={[assetSource]} /> + + setImageZoom(true)}> + + ); } diff --git a/apps/mobile/lib/hooks.ts b/apps/mobile/lib/hooks.ts new file mode 100644 index 00000000..beeab391 --- /dev/null +++ b/apps/mobile/lib/hooks.ts @@ -0,0 +1,13 @@ +import { ImageURISource } from "react-native"; + +import useAppSettings from "./settings"; + +export function useAssetUrl(assetId: string): ImageURISource { + const { settings } = useAppSettings(); + return { + uri: `${settings.address}/api/assets/${assetId}`, + headers: { + Authorization: `Bearer ${settings.apiKey}`, + }, + }; +} diff --git a/apps/mobile/package.json b/apps/mobile/package.json index 6519692e..578dbeeb 100644 --- a/apps/mobile/package.json +++ b/apps/mobile/package.json @@ -44,6 +44,7 @@ "react-native": "0.73.4", "react-native-awesome-slider": "^2.5.3", "react-native-gesture-handler": "~2.14.0", + "react-native-image-viewing": "^0.2.2", "react-native-markdown-display": "^7.0.2", "react-native-reanimated": "^3.8.0", "react-native-safe-area-context": "4.8.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9f0d5901..6e69788e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -384,6 +384,9 @@ importers: react-native-gesture-handler: specifier: ~2.14.0 version: 2.14.1(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0) + react-native-image-viewing: + specifier: ^0.2.2 + version: 0.2.2(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0) react-native-markdown-display: specifier: ^7.0.2 version: 7.0.2(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0) @@ -10377,6 +10380,12 @@ packages: react: '*' react-native: '*' + react-native-image-viewing@0.2.2: + resolution: {integrity: sha512-osWieG+p/d2NPbAyonOMubttajtYEYiRGQaJA54slFxZ69j1V4/dCmcrVQry47ktVKy8/qpFwCpW1eT6MH5T2Q==} + peerDependencies: + react: '>=16.11.0' + react-native: '>=0.61.3' + react-native-markdown-display@7.0.2: resolution: {integrity: sha512-Mn4wotMvMfLAwbX/huMLt202W5DsdpMO/kblk+6eUs55S57VVNni1gzZCh5qpznYLjIQELNh50VIozEfY6fvaQ==} peerDependencies: @@ -26591,6 +26600,12 @@ snapshots: react-native: 0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0) dev: false + react-native-image-viewing@0.2.2(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0): + dependencies: + react: 18.2.0 + react-native: 0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0) + dev: false + react-native-markdown-display@7.0.2(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0): dependencies: css-to-react-native: 3.2.0 -- cgit v1.2.3-70-g09d2