Add image sharing from image viewer (#699)

aeharding · Aug 20, 2023 · 861d821 · 861d821
1 parent 0db02b8
commit 861d821
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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 (
     <Container onClick={(e) => e.stopPropagation()}>
       <Voting post={post} imgSrc={imgSrc} />
@@ -72,7 +98,7 @@ export default function GalleryPostActions({
           <Amount>{post.counts.comments}</Amount>
         </Section>
       </div>
-      <IonIcon icon={shareOutline} onClick={() => share(post.post)} />
+      <IonIcon icon={shareOutline} onClick={shareImage} />
       {isNative() ? (
         <GalleryMoreActions post={post} imgSrc={imgSrc} />
       ) : (