From 861d821cdf5fdfc434976fcd6953e6ae73eab2d3 Mon Sep 17 00:00:00 2001 From: Alexander Harding <2166114+aeharding@users.noreply.github.com> Date: Sat, 19 Aug 2023 22:47:41 -0500 Subject: [PATCH] Add image sharing from image viewer (#699) --- android/capacitor.settings.gradle | 2 +- ios/App/Podfile | 2 +- ios/App/Podfile.lock | 10 +++---- package.json | 2 +- pnpm-lock.yaml | 8 +++--- src/features/gallery/GalleryMoreActions.tsx | 26 +++++++++++++++-- src/features/gallery/GalleryPostActions.tsx | 32 +++++++++++++++++++-- 7 files changed, 65 insertions(+), 17 deletions(-) diff --git a/android/capacitor.settings.gradle b/android/capacitor.settings.gradle index ca90599c2c..9373cdc4a7 100644 --- a/android/capacitor.settings.gradle +++ b/android/capacitor.settings.gradle @@ -33,4 +33,4 @@ include ':capacitor-plugin-safe-area' project(':capacitor-plugin-safe-area').projectDir = new File('../node_modules/.pnpm/capacitor-plugin-safe-area@2.0.5_@capacitor+core@5.2.3/node_modules/capacitor-plugin-safe-area/android') include ':capacitor-stash-media' -project(':capacitor-stash-media').projectDir = new File('../node_modules/.pnpm/capacitor-stash-media@0.0.4_@capacitor+core@5.2.3/node_modules/capacitor-stash-media/android') +project(':capacitor-stash-media').projectDir = new File('../node_modules/.pnpm/capacitor-stash-media@0.0.6_@capacitor+core@5.2.3/node_modules/capacitor-stash-media/android') diff --git a/ios/App/Podfile b/ios/App/Podfile index 994b6188f9..d3917d71ae 100644 --- a/ios/App/Podfile +++ b/ios/App/Podfile @@ -21,7 +21,7 @@ def capacitor_pods pod 'CapacitorAndroidNavMode', :path => '../../node_modules/.pnpm/capacitor-android-nav-mode@0.0.1_@capacitor+core@5.2.3/node_modules/capacitor-android-nav-mode' pod 'CapacitorApplicationContext', :path => '../../node_modules/.pnpm/capacitor-application-context@0.0.1_@capacitor+core@5.2.3/node_modules/capacitor-application-context' pod 'CapacitorPluginSafeArea', :path => '../../node_modules/.pnpm/capacitor-plugin-safe-area@2.0.5_@capacitor+core@5.2.3/node_modules/capacitor-plugin-safe-area' - pod 'CapacitorStashMedia', :path => '../../node_modules/.pnpm/capacitor-stash-media@0.0.4_@capacitor+core@5.2.3/node_modules/capacitor-stash-media' + pod 'CapacitorStashMedia', :path => '../../node_modules/.pnpm/capacitor-stash-media@0.0.6_@capacitor+core@5.2.3/node_modules/capacitor-stash-media' end target 'App' do diff --git a/ios/App/Podfile.lock b/ios/App/Podfile.lock index 79e6df09d9..f79b14e109 100644 --- a/ios/App/Podfile.lock +++ b/ios/App/Podfile.lock @@ -20,7 +20,7 @@ PODS: - Capacitor - CapacitorShare (5.0.6): - Capacitor - - CapacitorStashMedia (0.0.4): + - CapacitorStashMedia (0.0.6): - Capacitor - SDWebImage - CapacitorStatusBar (5.0.6): @@ -41,7 +41,7 @@ DEPENDENCIES: - "CapacitorKeyboard (from `../../node_modules/.pnpm/@capacitor+keyboard@5.0.6_@capacitor+core@5.2.3/node_modules/@capacitor/keyboard`)" - "CapacitorPluginSafeArea (from `../../node_modules/.pnpm/capacitor-plugin-safe-area@2.0.5_@capacitor+core@5.2.3/node_modules/capacitor-plugin-safe-area`)" - "CapacitorShare (from `../../node_modules/.pnpm/@capacitor+share@5.0.6_@capacitor+core@5.2.3/node_modules/@capacitor/share`)" - - "CapacitorStashMedia (from `../../node_modules/.pnpm/capacitor-stash-media@0.0.4_@capacitor+core@5.2.3/node_modules/capacitor-stash-media`)" + - "CapacitorStashMedia (from `../../node_modules/.pnpm/capacitor-stash-media@0.0.6_@capacitor+core@5.2.3/node_modules/capacitor-stash-media`)" - "CapacitorStatusBar (from `../../node_modules/.pnpm/@capacitor+status-bar@5.0.6_@capacitor+core@5.2.3/node_modules/@capacitor/status-bar`)" SPEC REPOS: @@ -72,7 +72,7 @@ EXTERNAL SOURCES: CapacitorShare: :path: "../../node_modules/.pnpm/@capacitor+share@5.0.6_@capacitor+core@5.2.3/node_modules/@capacitor/share" CapacitorStashMedia: - :path: "../../node_modules/.pnpm/capacitor-stash-media@0.0.4_@capacitor+core@5.2.3/node_modules/capacitor-stash-media" + :path: "../../node_modules/.pnpm/capacitor-stash-media@0.0.6_@capacitor+core@5.2.3/node_modules/capacitor-stash-media" CapacitorStatusBar: :path: "../../node_modules/.pnpm/@capacitor+status-bar@5.0.6_@capacitor+core@5.2.3/node_modules/@capacitor/status-bar" @@ -88,10 +88,10 @@ SPEC CHECKSUMS: CapacitorKeyboard: b978154b024a5f65e044908e37d15b7de58b9d12 CapacitorPluginSafeArea: bfdd714827dbd89fb44fea286beec996e1b0c5c4 CapacitorShare: cd41743331cb71d217c029de54b681cbd91e0fcc - CapacitorStashMedia: 3320d13a65938e7a1185ee4ab700212cf904367d + CapacitorStashMedia: 7c02b8e710f7ee187f2bc050881b15db046bf07f CapacitorStatusBar: 565c0a1ebd79bb40d797606a8992b4a105885309 SDWebImage: 750adf017a315a280c60fde706ab1e552a3ae4e9 -PODFILE CHECKSUM: 7996699c694e7f3e6ad97837152b3867676c10a7 +PODFILE CHECKSUM: 36989843b6cf9401db2dbaa43859b21d3b855ed1 COCOAPODS: 1.12.1 diff --git a/package.json b/package.json index 84050a1505..8177dd486e 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,7 @@ "capacitor-application-context": "^0.0.1", "capacitor-plugin-safe-area": "^2.0.5", "capacitor-set-version": "^2.0.13", - "capacitor-stash-media": "^0.0.4", + "capacitor-stash-media": "^0.0.6", "date-fns": "^2.30.0", "dexie": "^3.2.4", "dexie-react-hooks": "^1.1.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e3e77f9060..6c8a423e1d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -158,8 +158,8 @@ devDependencies: specifier: ^2.0.13 version: 2.0.13(@types/node@20.5.0)(typescript@5.1.6) capacitor-stash-media: - specifier: ^0.0.4 - version: 0.0.4(@capacitor/core@5.2.3) + specifier: ^0.0.6 + version: 0.0.6(@capacitor/core@5.2.3) date-fns: specifier: ^2.30.0 version: 2.30.0 @@ -4216,8 +4216,8 @@ packages: - typescript dev: true - /capacitor-stash-media@0.0.4(@capacitor/core@5.2.3): - resolution: {integrity: sha512-zO410WoEBfBDvTv9gCUJSdqGHBoUTmmewugQvdjuIDQ6TRzCDfXW1jsYFpcdCEkuoiu1cUuP/lizzBVLvUA1Pw==} + /capacitor-stash-media@0.0.6(@capacitor/core@5.2.3): + resolution: {integrity: sha512-T2cV01mIPxoLrHwxcP48gp3RVv1dSZY1ane5/wWixo/PBE7xLnXl9k5pVWB4VllCiYKvh2Vf2BiPqZwdA8yilw==} peerDependencies: '@capacitor/core': ^5.0.0 dependencies: diff --git a/src/features/gallery/GalleryMoreActions.tsx b/src/features/gallery/GalleryMoreActions.tsx index 89b32de155..0a8e75e040 100644 --- a/src/features/gallery/GalleryMoreActions.tsx +++ b/src/features/gallery/GalleryMoreActions.tsx @@ -23,9 +23,10 @@ import { useAppDispatch, useAppSelector } from "../../store"; import { savePost } from "../post/postSlice"; import { saveError } from "../../helpers/toastMessages"; import { Browser } from "@capacitor/browser"; -import { Share } from "@capacitor/share"; import { ActionButton } from "../post/actions/ActionButton"; import { StashMedia } from "capacitor-stash-media"; +import { isNative } from "../../helpers/device"; +import { Share } from "@capacitor/share"; interface GalleryMoreActionsProps { post: PostView; @@ -55,7 +56,28 @@ export default function GalleryMoreActions({ text: "Share", icon: shareOutline, handler: () => { - Share.share({ url: imgSrc }); + (async () => { + if (!isNative()) { + Share.share({ url: imgSrc }); + return; + } + + try { + await StashMedia.shareImage({ + url: imgSrc, + title: post.post.name, + }); + } catch (error) { + presentToast({ + message: "Error sharing photo", + duration: 3500, + position: "bottom", + color: "danger", + }); + + throw error; + } + })(); }, }, { diff --git a/src/features/gallery/GalleryPostActions.tsx b/src/features/gallery/GalleryPostActions.tsx index 62f30072ba..e45a4775ea 100644 --- a/src/features/gallery/GalleryPostActions.tsx +++ b/src/features/gallery/GalleryPostActions.tsx @@ -1,11 +1,11 @@ -import { IonIcon, useIonRouter } from "@ionic/react"; +import { IonIcon, useIonRouter, useIonToast } from "@ionic/react"; import { VoteButton } from "../post/shared/VoteButton"; import { PostView } from "lemmy-js-client"; import { chatbubbleOutline, shareOutline } from "ionicons/icons"; import styled from "@emotion/styled"; import { useAppSelector } from "../../store"; import { useBuildGeneralBrowseLink } from "../../helpers/routes"; -import { getHandle, share } from "../../helpers/lemmy"; +import { getHandle } from "../../helpers/lemmy"; import MoreActions from "../post/shared/MoreActions"; import { calculateTotalScore, @@ -17,6 +17,8 @@ import { GalleryContext } from "./GalleryProvider"; import { OVoteDisplayMode } from "../../services/db"; import { isNative } from "../../helpers/device"; import GalleryMoreActions from "./GalleryMoreActions"; +import { StashMedia } from "capacitor-stash-media"; +import { Share } from "@capacitor/share"; const Container = styled.div` display: flex; @@ -53,8 +55,32 @@ export default function GalleryPostActions({ ); const router = useIonRouter(); const location = useLocation(); + const [presentToast] = useIonToast(); const { close } = useContext(GalleryContext); + async function shareImage() { + if (!isNative()) { + Share.share({ url: imgSrc }); + return; + } + + try { + await StashMedia.shareImage({ + url: imgSrc, + title: post.post.name, + }); + } catch (error) { + presentToast({ + message: "Error sharing photo", + duration: 3500, + position: "bottom", + color: "danger", + }); + + throw error; + } + } + return ( e.stopPropagation()}> @@ -72,7 +98,7 @@ export default function GalleryPostActions({ {post.counts.comments} - share(post.post)} /> + {isNative() ? ( ) : (