feat: meilleur partage avec le web

Author: Sidoine

GaleriePhotos/ClientApp/components/image-view/top-actions.tsx

@@ -17,6 +17,7 @@ import { ActionMenu, ActionMenuItem } from "../action-menu";
 import { useFavoritesStore } from "@/stores/favorites";
 import { PhotoMoveModal } from "../modals/photo-move-modal";
 import { useAlert } from "../alert";
+import { useShare } from "../modals/photo-share";
 
 interface TopActionsProps {
   onDetailsToggle: () => void;
@@ -27,28 +28,6 @@ interface TopActionsProps {
   store: PhotoContainerStore;
 }
 
-function getMimeTypeFromExtension(extension: string) {
-  switch (extension.toLowerCase()) {
-    case "jpg":
-    case "jpeg":
-      return "image/jpeg";
-    case "png":
-      return "image/png";
-    case "gif":
-      return "image/gif";
-    case "mp4":
-      return "video/mp4";
-    case "mov":
-      return "video/quicktime";
-    case "webm":
-      return "video/webm";
-    case "webp":
-      return "image/webp";
-    default:
-      return "application/octet-stream";
-  }
-}
-
 function TopActions({
   onDetailsToggle,
   onFacesToggle,
@@ -78,42 +57,13 @@ function TopActions({
     closeMenu();
     store.setCover?.(photo.id);
   }, [closeMenu, store, photo.id]);
-  const [canShare, setCanShare] = useState(false);
-  useEffect(() => {
-    async function checkSharingAvailability() {
-      const available = await Sharing.isAvailableAsync();
-      setCanShare(available);
-    }
-    checkSharingAvailability();
-  }, []);
+
+  const [share, canShare] = useShare();
 
   const handleSystemShareClick = useCallback(async () => {
     closeMenu();
-    if (!canShare) return;
-
-    // Construction de l'URL distante de l'image (originale) via store
-    const imageUrl = photosStore.getImage(photo.publicId);
-
-    // Télécharger l'image dans un fichier temporaire (obligatoire pour expo-sharing sur mobile)
-    if (Platform.OS !== "web") {
-      const fileName = `shared-${photo.publicId}.jpg`;
-      const baseDir = Paths.cache;
-      const tmpPath = `${baseDir}${fileName}`;
-      const download = await File.downloadFileAsync(
-        imageUrl,
-        new Directory(tmpPath)
-      );
-      await Sharing.shareAsync(download.uri, {
-        dialogTitle: "Partager l'image",
-        mimeType: download.type,
-      });
-    } else {
-      await Sharing.shareAsync(imageUrl, {
-        dialogTitle: "Partager l'image",
-        mimeType: getMimeTypeFromExtension(imageUrl.split(".").pop() || "jpg"),
-      });
-    }
-  }, [canShare, closeMenu, photo.publicId, photosStore]);
+    await share(photo);
+  }, [closeMenu, photo, share]);
 
   const handleRotate = useCallback(
     async (angle: number) => {

GaleriePhotos/ClientApp/components/modals/mime-type-helper.ts

@@ -0,0 +1,21 @@
+export function getMimeTypeFromExtension(extension: string) {
+  switch (extension.toLowerCase()) {
+    case "jpg":
+    case "jpeg":
+      return "image/jpeg";
+    case "png":
+      return "image/png";
+    case "gif":
+      return "image/gif";
+    case "mp4":
+      return "video/mp4";
+    case "mov":
+      return "video/quicktime";
+    case "webm":
+      return "video/webm";
+    case "webp":
+      return "image/webp";
+    default:
+      return "application/octet-stream";
+  }
+}

GaleriePhotos/ClientApp/components/modals/photo-share.tsx

@@ -0,0 +1,42 @@
+import { useCallback, useState, useEffect } from "react";
+import * as Sharing from "expo-sharing";
+import { usePhotosStore } from "@/stores/photos";
+import { Photo } from "@/services/views";
+import { Directory, File, Paths } from "expo-file-system";
+
+export function useShare() {
+  const [canShare, setCanShare] = useState(false);
+  const photosStore = usePhotosStore();
+
+  useEffect(() => {
+    async function checkSharingAvailability() {
+      const available = await Sharing.isAvailableAsync();
+      setCanShare(available);
+    }
+    checkSharingAvailability();
+  }, []);
+
+  const share = useCallback(
+    async (photo: Photo) => {
+      if (!canShare) return;
+
+      // Construction de l'URL distante de l'image (originale) via store
+      const imageUrl = photosStore.getImage(photo.publicId);
+
+      // Télécharger l'image dans un fichier temporaire (obligatoire pour expo-sharing sur mobile)
+      const fileName = `shared-${photo.publicId}.jpg`;
+      const baseDir = Paths.cache;
+      const tmpPath = `${baseDir}${fileName}`;
+      const download = await File.downloadFileAsync(
+        imageUrl,
+        new Directory(tmpPath)
+      );
+      await Sharing.shareAsync(download.uri, {
+        dialogTitle: "Partager l'image",
+        mimeType: download.type,
+      });
+    },
+    [canShare, photosStore]
+  );
+  return [share, canShare] as const;
+}

GaleriePhotos/ClientApp/components/modals/photo-share.web.tsx

@@ -0,0 +1,38 @@
+import { useCallback } from "react";
+import { usePhotosStore } from "@/stores/photos";
+import { Photo } from "@/services/views";
+
+export function useShare() {
+  const canShare = window.navigator.share !== undefined;
+  const photosStore = usePhotosStore();
+
+  const share = useCallback(
+    async (photo: Photo) => {
+      if (!window.navigator.canShare) return;
+
+      // Construction de l'URL distante de l'image (originale) via store
+      const imageUrl = photosStore.getImage(photo.publicId);
+
+      const result = await fetch(imageUrl);
+      if (result.ok) {
+        const blob = await result.blob();
+        const file = new File([blob], `shared-${photo.publicId}.jpg`, {
+          type: blob.type,
+        });
+        if (window.navigator.canShare({ files: [file] })) {
+          await window.navigator.share({
+            title: "Partager l'image",
+            files: [file],
+          });
+        } else if (window.navigator.canShare({ url: imageUrl })) {
+          await window.navigator.share({
+            title: "Partager l'image",
+            url: imageUrl,
+          });
+        }
+      }
+    },
+    [photosStore]
+  );
+  return [share, canShare] as const;
+}

GaleriePhotos/Properties/launchSettings.json

@@ -1,28 +1,28 @@
 {
-    "iisSettings": {
-        "windowsAuthentication": false,
-        "anonymousAuthentication": true,
-        "iisExpress": {
-            "applicationUrl": "http://localhost:65029",
-            "sslPort": 44322
-        }
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "http://localhost:65029",
+      "sslPort": 44322
+    }
+  },
+  "profiles": {
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
     },
-    "profiles": {
-        "IIS Express": {
-            "commandName": "IISExpress",
-            "launchBrowser": true,
-            "environmentVariables": {
-                "ASPNETCORE_ENVIRONMENT": "Development"
-            }
-        },
-        "GaleriePhotos": {
-            "commandName": "Project",
-            "environmentVariables": {
-                "Administrator__Login": "[email protected]",
-                "ASPNETCORE_ENVIRONMENT": "Development",
-                "Administrator__Password": "tototo"
-            },
-            "applicationUrl": "http://*:6009"
-        }
+    "GaleriePhotos": {
+      "commandName": "Project",
+      "environmentVariables": {
+        "Administrator__Login": "[email protected]",
+        "ASPNETCORE_ENVIRONMENT": "Development",
+        "Administrator__Password": "tototo"
+      },
+      "applicationUrl": "http://*:6009;https://*:7009"
     }
+  }
 }